Angular 如何默认设置单选按钮，响应式(Reactive)表单

Question

使用单选按钮在 Angular 中实现响应式(Reactive)表单。我想设置一个默认值，我尝试了以下方法:

模板:

<form [formGroup]="form" (ngSubmit)="onSubmit(form)" class="actionsForm">

    <input type="radio" id="entertainCrowdSkill1" [value]="skillsForBackend[0]"
    class="radiobuttons" formControlName="skill" [checked]="true">

    <input type="radio" id="entertainCrowdSkill2" [value]="skillsForBackend[1]" 
    class="radiobuttons" formControlName="skill">

</form>

模型:

  ngOnInit() {
    this.form = this.fb.group({
      skill: ['', Validators.required],
    });

  }

  onSubmit(form) {
    console.log(form.controls.skill.value) // logs empty string
}

即使 CSS:checked 按钮似乎也被选中类被应用。但是，当我尝试记录技能值时，它是一个空字符串(在 fb 中输入的默认值)。我见过一个 answer但这是针对模板驱动的表单。

如何以 react 形式为模板中的单选按钮设置默认值？

Answer 1

用 FormBuilder 分配初始值组构造函数而不是使用 [checked]。您分配了值 '' ，这是一个空字符串。要执行 onSubmit 函数添加 (ngSubmit)="onSubmit()"到表单标签。

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input type="radio" formControlName="skill" [value]="skillsForBackend[0]">
  <input type="radio" formControlName="skill" [value]="skillsForBackend[1]">
</form>

在您的 typescript 中尝试以下操作。

ngOnInit() {
  this.form = this.fb.group({
    skill: [this.skillsForBackend[0], Validators.required]
  });
}

onSubmit() {
  console.log(this.form.value) // should show { skill: /* your data */ }
}