CODEWITHSUNDEEP
htmlangular
CodeChanger
CodeChanger

Reputation: 8381

Radio button not selected while we refresh page or not setting default selection

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

Answers (2)

Sravan
Sravan

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

Saeed
Saeed

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

Related Questions