Angular 角度如何默认设置单选按钮、反应式窗体

使用单选按钮以角度实现被动形式。要设置默认值，我已尝试以下操作：

模板： 即使应用了

CSS:checked

类，该按钮也会被选中。但是，当我尝试记录skill的值时，它是一个空字符串（fb中输入的默认值）。我已经看到了一个模板驱动的表单，但这是针对模板驱动的表单的

---

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

使用

FormBuilder

组构造函数分配初始值，而不是使用[checked]。您分配了值

'

，它是一个空字符串。要执行onSubmit函数，请将

（ngSubmit）=“onSubmit（）”

添加到表单标记中

在您的打字脚本中，尝试以下操作

ngOnInit（）{
this.form=this.fb.group({
技能：[this.skillsForBackend[0]，验证器。必填]
});
}
onSubmit（）{
console.log（this.form.value）//应该显示{skill://*您的数据*/}
}
下面的方法对我很有效

首先在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>

请注意，html中添加的value属性的值也是如何添加为表单组中技能的初始值的。
@WillemvanderVeen我不确定为什么要将
表单
或
表单.value
传递给
提交
。它基本上已经在您的组件中可用，可以通过
this.form
访问。我认为两种解决方案都可以，传递
form.value
或通过
this.form获取值…
。至少两者都起作用了。我同意传递form.value是不必要的噪音。当然它是有效的，但是
this.form…
在方法本身中也会起到同样的作用。噪音小。：）
  ngOnInit() {
    this.form = this.fb.group({
      skill: ['', Validators.required],
    });

  }

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

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