Angular7检测反应形式中输入值的变化答案

【问题标题】：Angular7 Detect change of input value in reactive formsAngular7检测反应形式中输入值的变化
【发布时间】：2019-09-04 17:30:27
【问题描述】：

我第一次在 Angular(v7) 中使用响应式表单

如果任何字段发生更改，我想启用我的提交按钮。所以我正在使用表单的dirty 值。对于一个简单的场景，它的工作原理。我更改了输入类型文本，按钮变为启用。

但是现在我遇到了一个元素 (<span id="locationUpdated">) 的问题，它内部的值正在被其他一些 javascript 函数的结果更改。

所以我决定监听 hidden 输入的变化，它以与 span 元素相同的方式获取值

    <form [formGroup]="model.form" >
        ....
        <input id="nameInput" type="text"
            [(ngModel)]="model.user.name"
            formControlName="name" />           
        ...
        <span [textContent]="model.user.location.label" id="locationUpdated"></span>    

        <input type="hidden" [value]="model.user.location.label" formControlName="location" />
        ....        
        <button [ngClass]="{'disabled': !model.form.dirty}></button>

    </form>

--- 组件---

private buildFormUpdated() {
    this.model.form = this.formBuilder.group({
        name: [this.model.user.name,  [Validators.required]],
        location: [this.model.user.location.label]
    });
}

我将hidden 替换为text，这样我就可以看到值的变化并且它工作正常。

但是dirty 的属性继续false。如果我手动更改，我会得到dirty:true

我错过了什么？谢谢

【问题讨论】：

你能解释一下“但是现在我遇到了一个元素 () 的问题，它里面的值正在被其他一些 javascript 函数的结果改变。”更详细？
我建议您仔细阅读文档，因为首先您不应该将 ngModel 与响应式表单一起使用，其次不要将value 与响应式表单一起使用。文档：angular.io/guide/reactive-forms
要在响应式表单中获取输入值更改，您只需订阅FormControl.valueChanges
绝不、绝不、绝不将 [(ngModel)] 与 formControlName 一起使用。

标签： javascript angular typescript angular-reactive-forms

【解决方案1】：

我错过了什么？

以编程方式更改数据时，脏标志未设置为真。仅当用户模糊控件组件或更改值（通过 UI）时才设置为 true

请参考官方文档 - https://angular.io/guide/form-validation#why-check-dirty-and-touched

【讨论】：

【解决方案2】：

您可以通过在您的逻辑之后执行此操作来显式地将控件标记为脏 this.model.form.markAsDirty();

【讨论】：