Angular7 以反應形式檢測輸入值的變化

Question

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

我錯過了什么？ 謝謝

Answer 1

我錯過了什么？

以編程方式更改數據時，臟標志未設置為 true。 僅當用戶模糊控件組件或更改值（通過 UI）時才設置為 true

請參考官方文檔 - https://angular.io/guide/form-validation#why-check-dirty-and-touched

Answer 2

您可以通過在邏輯 this.model.form.markAsDirty(); 之后執行此操作來顯式地將控件標記為臟控件；