Angular中如何让禁用的FormControl值出现在this.form.value中？

Angular默认会排除禁用状态的表单控件值，所以你用this.form.value拿不到禁用的newsletter值。有两种常用方法可以解决这个问题：

方法一：使用getRawValue()方法 #

Angular的FormGroup/FormControl提供了getRawValue()方法，它会返回所有控件的值，不管控件是否处于禁用状态。直接替换原来的this.form.value即可：

// 原来的写法，无法获取禁用控件值
const formValue = this.form.value;

// 修改后的写法，可获取所有控件值（包括禁用状态）
const formValue = this.form.getRawValue();

这样即使newsletter是禁用状态，它的true值也会被包含在返回的对象里。

方法二：用readonly替代disabled #

如果你不需要严格的禁用状态（只是不想让用户修改控件值），可以把控件设为只读，同时保持启用状态，这样值就会正常出现在this.form.value中：

1. 初始化FormControl时不设置禁用：

newsletter: new FormControl(true),

2. 在模板的复选框上添加readonly属性：

<input type="checkbox" formControlName="newsletter" [readonly]="true">

这种方式下，用户无法修改复选框状态，但控件始终处于启用状态，值会被包含在form.value里。

内容的提问来源于stack exchange，提问作者xRay