Reputation: 8381
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.
Upvotes: 0
Views: 1288
Reputation: 18657
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];
Upvotes: 1
Reputation: 5488
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;
}
Upvotes: 0