Angular7以无功形式检测输入值的变化

时间:2019-09-04 17:30:27

标签: javascript angular typescript angular-reactive-forms

我第一次使用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

我想念什么? 谢谢

2 个答案:

答案 0 :(得分:0)

  

我想念什么?

以编程方式更改数据时,脏标志未设置为true。 仅当用户模糊控制组件或更改值(通过UI)时,才将其设置为true。

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

答案 1 :(得分:0)

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