0

I am creating one form where only 2 partner selection are there and from2 need to select one radio button and at first load 1st partner selected defaultly but some how its not working

please check below code :

<form #personalForm="ngForm" class="editForm" novalidate>
    <div class="mainDiv">
      <div>Select the type of Partner and click "Next"</div>
      <div *ngFor='let partner of partners; let i = index' class="radio">
        <label for="partnerSelection">
          <input ngModel name="partnerSelection" id='partnerSelection' type="radio" [value]="partner" [checked]="selectedPartnerIndex === i"> {{ partner.partnerType }}
        </label>
      </div>
    </div>
  <div class="form-group text-center">
    <button class="btn btn-success btn-outline-rounded btn-info" [disabled]="!personalForm.valid" (click)="goToNext(personalForm)">
      Next
      <span style="margin-left:10px;" class="glyphicon glyphicon-arrow-right"></span>
    </button>
  </div>
</form>

Based on comment here is my Component file code of saving and retrieving data of selected partner.

ngOnInit() {
        this.selectedPartnerIndex = this.formDataService.getParrtnership();
        if(this.selectedPartnerIndex.partnerId == null){
            this.selectedPartnerIndex = this.partners[0];
        }
        console.log('Personal feature loaded!',this.selectedPartnerIndex);
    }

    save(form: any): boolean {
        if (!form.valid) {
            return false;
        }

        this.formDataService.setParrtnership(this.selectedPartnerIndex);
        return true;
    }

    goToNext(form: any) {


        if (this.save(form)) {
            // Navigate to the work page
            this.router.navigate(['/headquarter']);
        }
    }

still its not selecting first radio input.

CodeChanger
  • 7,953
  • 5
  • 49
  • 80
  • try to remove id and name attribute in input radio and see the result. – Sanoj_V May 17 '18 at 07:25
  • why it so any specific reason ? – CodeChanger May 17 '18 at 07:29
  • because id must be unique and ngModel already contains name and other attribute see the documentaion here: (https://angular.io/api/forms/NgModel) – Sanoj_V May 17 '18 at 07:33
  • I have removed both id and name property but still its not working I found this https://stackoverflow.com/questions/42443903/after-adding-ngmodel-to-a-radio-button-group-the-default-checked-no-longe my be due to this [checked] property not working. – CodeChanger May 17 '18 at 07:38
  • see also https://stackoverflow.com/questions/44044746/selected-of-select-doesnt-work-as-excepted-in-angular2 – Pengyy May 17 '18 at 07:41
  • Check out this link (https://stackoverflow.com/a/43582771). I think you are trying to bind `[value]="partner"` object instead of `[value]="partner.your_object_key"` – Sanoj_V May 17 '18 at 07:51

2 Answers2

1

You have to make ngModel to be equal to selectedPartnerIndex

HTML:

<form #personalForm="ngForm" class="editForm" novalidate>
    <div class="mainDiv">
      <div>Select the type of Partner and click "Next"</div>
      <div *ngFor='let partner of partners; let i = index' class="radio">
        <label for="partnerSelection">
          <input [(ngModel)]="selectedPartnerIndex"  type="radio" [value]="partner"> {{ partner.partnerType }}
        </label>
      </div>
    </div>
  <div class="form-group text-center">
    <button class="btn btn-success btn-outline-rounded btn-info" [disabled]="!personalForm.valid" (click)="goToNext(personalForm)">
      Next
      <span style="margin-left:10px;" class="glyphicon glyphicon-arrow-right"></span>
    </button>
  </div>
</form>

In Component:

By default:

selectedPartnerIndex = this.partners[0];
Sravan
  • 18,467
  • 3
  • 30
  • 54
  • its working in 1st scenario where I am setting default object but while I come back from 2nd screen and try to set last selected object its not setting or nor selection any radio value. – CodeChanger May 17 '18 at 09:58
  • second screen means? can you explain little more? – Sravan May 17 '18 at 10:00
  • I am using router and in my 1screen I have list of Partner which I need to select single partner and than navigate to 2nd screen and in 2nd screen I ave button Previous which provide user to go back and user can able to change partner selection but while go back to 1st screen and selection last value which user selected not able to select. – CodeChanger May 17 '18 at 10:03
  • how you are maintaining that partner selection? which should be selected when you comeback to first screen? – Sravan May 17 '18 at 10:04
  • I m storing that selected object in shared service and agin get it from that service setting & getting selected object working fine and I am able to see that value can retrive in selectedPartnerIndex but not setting in radio button – CodeChanger May 17 '18 at 10:07
  • can you send that `component` code of retrieving the `object` – Sravan May 17 '18 at 10:10
  • I have updated my question with my component code for save & retrieving selected partner – CodeChanger May 17 '18 at 10:16
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/171235/discussion-between-sravan-and-codechanger). – Sravan May 17 '18 at 10:17
0

I think this part of code helps you

<tr *ngFor="let partner of partners; let idx = index">
    <label for="partnerSelection">
        <input [(ngModel)]="selectedParner" name="partnerSelection" id='partnerSelection' type="radio" [value]="partner['KEY']" [checked]="(selectedPartnerIndex === idx)? true : false"> {{ partner.partnerType }}
    </label>
</tr>

And Component

@Component({...})
class App {
    selectedPartnerIndex = 0;
}
Saeed
  • 5,413
  • 3
  • 26
  • 40