angular - Datadrivna formulär, loopa radioknapp med standardvärde fungerar inte med validering?

Jag har ett reaktivt formulär som loopar ut viss data. Jag vill sätta standardvärdena för radioknapparna här. Det fungerar, men valideringen fungerar inte.

    <fieldset *ngIf="question.radioButtonList.length > 0">
      <div class="choice-list">
        <div *ngFor="let item of question.radioButtonList" class="choice-list-item">
          <input type="radio" [name]="choice" formControlName="choice" [id]="item.id" [value]="item.id" [checked]="question.answer.selectedChoiceId === item.id"/>
          <label>{{item.title}}</label>
        </div>
      </div>
    </fieldset>

Och i min formulärdefinition satte jag formControlName för att ha en obligatorisk validator.

 'choice': new FormControl('',Validators.required)

Saken är den att radioknappen markeras korrekt i loopen men validatorn säger att den är ogiltig. Tills jag manuellt klickar på en radioknapp.

Svar #1

Detta beror på att du satte det initiala värdet som en tom sträng i din formulärkontroll, vilket utvärderas som giltigt. Det ignorerar [checked] i din mall. Så du behöver sätta det initiala värdet när du skapar formulärkontrollen:

'choice': new FormControl(someInitialValueHere, Validators.required)

(Förresten, du skulle inte behöva required-valideringen här, eftersom detta är en radioknapp och inte kan avmarkeras)

om du inte kan ställa in det initiala värdet när du bygger formuläret, kan du använda patchValue

this.myForm.patchValue({choice: someValue})

Detta kommer att sätta standardvärdet till det du vill, men det innebär att du måste göra logiken för att sätta ditt standardvärde (motsvarande din [checked]-logik). Det verkar som att du kanske behöver göra lite loopning för att ta reda på vilket standardvärde du vill ha.