Angular radio-buttons out of sync with model

user_13933736 0
Viewed 368

I'm having an issue where my radio buttons (view) get out of sync with my model (reactive form) when the same label exists in subsequent questions.

I'm creating some kind of survey app which (of course) contains multiple questions, but when 2 subsequent questions contain the same answer labels in different positions, the view gets out of sync when selecting one of them and navigating between the 2 questions. I've created a Stackblitz to illustrate the issue. (Same Stackblitz without Material)

Reproduction steps wrong selection:

  1. Select the second option for question 1 ('MRX').
  2. Click the 'Next' button (answer gets stored in model).
  3. Select the second option again for question 2 ('Ibanez').
  4. Click the 'Previous' button (answer gets stored in model).
  5. Click the 'Next' button again.
  6. Now you can see that the view is out of sync with the model (the model is also printed on screen).

Reproduction steps double selection:

  1. Select the first option for question 1 ('Ibanez').
  2. Click the 'Next' button (answer gets stored in model).
  3. Select the second option for question 2 ('Inbanez').
  4. Click the 'Previous' button (answer gets stored in model).
  5. Now you can see that 2 options are selected (first and second).

For more information on the app I've added a description in the parent component (survey-parent.component.html) of the stackblitz.

I'm not sure if this is a bug in Angular or that I am doing something wrong here.

angular-reactive-forms angular parent-child
2 Answers

How about setting [checked] attribute based on the given answer?

    <mat-radio-group formControlName="answer">
    <ng-container *ngFor="let questionAnswer of surveyQuestion.answers; let i = index">
      <mat-radio-button [checked]="isSet(i+1)" color="primary" [value]="i+1">{{questionAnswer}}</mat-radio-button>
      <br /><br />
    </ng-container>
  </mat-radio-group>

And in the ts-file:

  isSet(i: number){
     return i ===this.surveyQuestion.givenAnswer;
  }

I've updated the snippet:

https://stackblitz.com/edit/angular-9-material-starter-fbs7gk?file=src%2Fapp%2Fsurvey-child%2Fsurvey-child.component.ts

user_108322610
user_92661710
Related