How to use radio buttons dynamically in angular reactive forms array-CodePudding

I have a weird problem. I researched a lot but, I could not find any solution for my specific task.

Here is the problem: I want to build dynamic forms, where I have radio buttons and I want to set true or false on specific form controls.

question: where is my problem?

here is template

<div [formGroup]="form">
    <h1 mat-dialog-title>add question</h1>
    <mat-dialog-content>
        <p>description</p>
        <div >
            <editor [apiKey]="editorKey" [init]="editorConfig" formControlName="question"></editor>
        </div>
        <ng-container *ngFor="let answer of $any(answers.controls); index as i">
            <ng-container formArrayName="answers">
                <div [formGroup]="answer" >
                    <div>
                        <!-- problem is here, I can't set formControlName -->
                        <input type="radio" formControlName="isCorrect" name="isCorrect">
                    </div>
                    <input type="text" formControlName="answer" placeholder="answer #{{i   1}}">
                    <div matTooltip="delete" matTooltipPosition="above" (click)="delete(i)">X</div>
                </div>
            </ng-container>
        </ng-container>
        <button (click)="add()" >add answer</button>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
        <button >accept</button>
    </mat-dialog-actions>
</div>

here is component

export class AddQuestionDialogComponent implements OnInit {

  form!: FormGroup;
  public editorConfig = editorConfig;
  public editorKey = apiKey.key;
  
  constructor(
    private _fb: FormBuilder
  ) { }

  ngOnInit(): void {
    this.form = this._fb.group({
      question: new FormControl(``, [Validators.required]),
      answers: new FormArray([], [Validators.required])
    });
  }

  get answers(): FormArray {
    return this.form.controls['answers'] as FormArray;
  }

  add() {
    this.answers.push(
      this._fb.group({
        answer: new FormControl(``, [Validators.required]),
        isCorrect: new FormControl(false)
      })
    );
  }
  
  delete(i: number) {
    this.answers.removeAt(i);
  }
}

CodePudding user response：

Have you tried it with a <mat-radio-button> instead of <input type="radio">.

Here is the documentation. It says there that the compatibility with forms is given but the radio button needs to be placed in a <mat-radio-group .

CodePudding user response：

Since Angular 9 (I don't know if since Angular 8) you can not use [formGroup]="variable_you_use_in_loop"(*) in a FormArray, you should use FormGroupName

<ng-container *ngFor="let answer of $any(answers.controls); index as i">
      <ng-container formArrayName="answers">
          <!--see you use [formGroupName]="i" NOT [formGroup]="answer"-->
          <div [formGroupName]="i" >
               ...
          </div>
      </ng-container>
</ng-container>

(*)For me, it was a big back step

CodePudding user response：

Finaly I did it by myself here is example

in template

<input (change)="isTrue(i)" type="radio" name="isCorrect">

in component

isTrue(i: number) {
  this.answers.controls.forEach((el: any, index) => {
    el.controls['isCorrect'].patchValue(i == index ? true : false);
  });
}