Angular如何默认设置单选按钮，Reactive表单

Question

使用单选按钮在Angular中实现反应式表单。我想设置一个默认值，我尝试了以下内容：

模板：

<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，但这是模板驱动的表格。

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

Answer 1

使用FormBuilder组构造函数分配初始值，而不是使用[checked]。您指定了值''，这是一个空字符串。您也可以使用(ngSubmit)="onSubmit(form.value)"。

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

在你的打字稿中尝试以下内容。

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

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

Answer 2

以下方法对我有用。

首先在你的 html 中添加 value 属性

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

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

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

</form>

然后修改你的模型如下。

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

  }

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

注意在html中添加的value属性的值是如何也作为表单组中skill的初始值添加的。