Angular 如何默认设置单选按钮、响应式表单

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 class，该按钮似乎也已被选中。但是，当我尝试记录 skill 的值时，它是一个空字符串（在 fb 中输入的默认值）。我见过但这是针对模板驱动的表单。

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

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>

在您的打字稿中尝试以下操作。

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

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

Answer 2

下面的方法对我有用。

首先在你的html

中添加值属性

<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的初始值添加到表单组中。

Angular 如何默认设置单选按钮、响应式表单

Angular how to default set radio buttons, Reactive forms

angular

angular-forms

模板：

型号：