角度 2 中没有默认值的 FormControl 布尔值答案

【问题标题】：FormControl boolean without default value in angular 2角度 2 中没有默认值的 FormControl 布尔值
【发布时间】：2017-06-19 11:42:08
【问题描述】：

我在 Angular 2 (4.1.2) 中使用反应形式

我有一个布尔属性，我不希望它具有默认值，但它应该是必需的。

这就是我创建表单的方式：

constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
        payedOvertime: [false, Validators.required],
    });
}

还有我的html：

<div class="form-group">
    <label>Payed overtime</label>
    <label>
        <input type="radio" name="payedOvertime" formControlName="payedOvertime" [value]="true" />Yes
    </label>
    <label>
        <input type="radio" name="payedOvertime" formControlName="payedOvertime" [value]="false" />No
    </label>
</div>

问题是，虽然这可行，但单选按钮已预先选择，但我不希望这样，而是必须通过单击其中一个单选按钮来选择它。如果没有单击任何单选按钮，我希望表单无效。

【问题讨论】：

如果它是一个真正的布尔值，那么为什么不使用一个简单的复选框呢？是否要求它是单选按钮？

标签： javascript angular angular-reactive-forms angular-validation

【解决方案1】：

将payedOvertime: [false, Validators.required] 更改为payedOvertime: [null, Validators.required]。

鉴于您将其设置为false，它与模板中No 单选按钮的值相匹配，并且默认选择它（正确地如此）。将其设置为 null 将阻止 Angular 将该值与模板中声明的任何值匹配，因此不会选择这些单选按钮。

【讨论】：

【解决方案2】：

只将Validators.required改为Validators.requiredTrue，比如：

payedOvertime: [false, Validators.requiredTrue]

【讨论】：