Angular2/4 - 反应式表单和单选按钮：如何默认检查一个答案

【问题标题】：Angular2/4 - Reactive forms and radio buttons: How to check one by defaultAngular2/4 - 反应式表单和单选按钮：如何默认检查一个
【发布时间】：2018-03-06 13:58:23
【问题描述】：

请看这段代码 sn-p from the docs:

当以反应形式使用单选按钮时，...

import {Component} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form">
      <input type="radio" formControlName="food" value="beef" > Beef
      <input type="radio" formControlName="food" value="lamb"> Lamb
      <input type="radio" formControlName="food" value="fish"> Fish
    </form>

    <p>Form value: {{ form.value | json }}</p>  <!-- {food: 'lamb' } -->
  `,
})
export class ReactiveRadioButtonComp {
  form = new FormGroup({
    food: new FormControl('lamb'),
  });
}

我的问题：我应该怎么做才能使这些单选按钮之一默认选中？我需要向 FormControl 添加一些额外的属性吗？还是我应该修改模板中的某些内容？

（我尝试在模板中为其中一个添加checked 属性，但由于某种原因它没有做任何事情。我在浏览器中使用“检查元素”查看了它，并且该属性存在于DOM中，但它对单选按钮的状态没有影响。它不会成为选中状态。）

【问题讨论】：

标签： angular radio-button

【解决方案1】：

我相信你唯一的问题是你没有使用ReactiveFormsModule。使用您当前的设置，您已经选择了lamb，并且在使用ReactiveFormsModule 时显示为已选择。

在你的模块中，你需要导入这个：

import { ReactiveFormsModule }   from '@angular/forms';

@NgModule({
  imports: [ BrowserModule, ReactiveFormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})

这是working plunker。

【讨论】：

啊，感谢您指出 lamb 已被选中！我错过了这一点，实际上是 FormControl 的值进行了选择。在其值中，应指定该单选按钮的值，默认情况下应从组中选择该值。现在我明白了，它按预期工作。
...顺便说一句，我已经导入了 ReactiveFormsModule。这只是我没有做对有价值的事情。

【解决方案2】：

对于每个选项都有一个 selected 属性，如果您希望该选项作为默认选项，您可以设置该属性。你可以写：

<option selected></option>

或：

<option selected="selected"></option>

并使用 YourOptionTag.selected 方法更改该值，例如在 javascript 中。

希望对你有帮助

【讨论】：

selected 是下拉列表的属性。对于（和），应该使用 checked 属性。我的问题是，即使我在模板中为组中的一个单选按钮（具有相同名称的单选按钮）设置了选中的属性，它也没有任何效果，所有这些都保持未选中状态。
啊好吧，我可以想象你要加载什么。您是否尝试使用字符串插值从数组中填充您的选择？如果是，则字符串必须适合，以设置默认值。我会在晚上向您发布我的代码。我在 Angular 4 中做到了
我更新了我的问题。我的表单是模型驱动的。它有一个FormGroup，每个字段都属于一个FormControl。 ...并且一些附加属性，如 placeholder、rows min、max 等正在添加到模板文件中的输入。（这也是我添加 checked 属性的方式，不幸的是它不起作用。）