angular - 数据驱动的表单，具有默认值的循环单选按钮不适用于验证？

Question

我有一个 react 形式，循环输出一些数据。我想在这里设置单选按钮的默认值。它有效，但验证无效。

    <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>

在我的表单定义中，我将 formControlName 设置为具有必需的验证器。

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

问题是在循环中正确检查了单选按钮，但验证器说它无效。直到我手动点击一个单选按钮。

Answer 1

这是因为您在表单控件中将初始值设置为空字符串，该值被评估为有效。它会忽略模板中的 [checked]。所以在创建表单控件时需要设置初始值:

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

(顺便说一句，您在这里不需要required 验证，因为这是一个单选按钮，不能取消选中)

如果在构建表单时不能设置初始值，可以使用patchValue

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

这会将默认值设置为您想要的值，但这意味着您必须执行设置默认值的逻辑(对应于您的 [checked] 逻辑)。似乎您需要进行一些循环，以找出您想要的默认值。