form.valueChanges 不会为禁用的控件发出值

Posted 2023-03-13

【中文标题】form.valueChanges 不会为禁用的控件发出值

【英文标题】：form.valueChanges doesn't emit values for disabled controls

【发布时间】：2018-06-08 03:24:09

【问题描述】：

我有一个 Angular Reactive 表单。我订阅了它的值更改，并将向父组件发出更改。某些控件可能会被用户禁用。问题是当表单 valueChanges 发出时，来自禁用控件的值丢失了。我设置了一个基本的example。

选中复选框并禁用电子邮件输入时，不会记录表单控件值。但我想获取所有表单值。

【问题讨论】：

在反应形式中，角度忽略已禁用的值。

【参考方案1】：

使用 FormGroup 的 getRawValue() 来包含控制值，无论启用/禁用状态如何。

More information in the API documentation

this.myForm.valueChanges.subscribe(() => 
    this.formValues =  JSON.stringify(this.myForm.getRawValue());
);

Here is the forked example

【参考方案2】：

来自禁用输入的值被忽略（尝试提交带有禁用输入的表单：它不会被发布）。

您可以将其更改为“只读”

<input formControlName="email" [readonly]="cb.checked">
<input #cb type="checkbox" formControlName="toggleEmail">

Updated example.