如何在Angular中使按鈕禁用而沒有焦點效果？

Question

我有2個輸入字段和一個保存按鈕，用於更新操作。 如果沒有更改，我需要禁用保存按鈕。 我的以下代碼運行良好，但是唯一的問題是，如果我單擊屏幕上的其他位置，則保存按鈕將變為活動狀態（當輸入字段失去焦點時，保存按鈕將處於活動狀態。）

模板代碼為：

<mat-card-content>
        <h1 class="new-header">Enter New Values</h1>
        <div fxLayout="row">
          <mat-form-field fxFlex="20">
            <input matInput name="label" [(ngModel)]="employee.label" placeholder="Label"
                   (change)="onInputFieldChange()"
                   required>
          </mat-form-field>
        </div>
        <div fxLayout="row">
          <mat-form-field fxFlex="50">
            <input matInput name="postalAddress"
                   [(ngModel)]="employee.postalAddress" placeholder="Postal Address"
                   (change)="onInputFieldChange()" required>
          </mat-form-field>
        </div>
</mat-card-content>

<button type="button" id="update" class="button-style" (click)="onSaveEmployee()"
                [disabled]="!filterDataSelected || !employee.label" > Save
</button>

ts方法是：

public onInputFieldChange() {
    this.filterDataSelected = true;
}

如我所說，禁用/啟用按鈕部分工作正常，但它僅在輸入字段上失去焦點。 那么如何使按鈕動態啟用/禁用？

Answer 1

我對angular不太熟悉，但是我認為問題出在change事件的本質上。 一旦輸入字段失去焦點，就會觸發此js事件。 里面的實際文本已更改的事實並不重要。 因此，每當您的輸入失去焦點時，都將filterDataSelected設置為true，從而使按鈕可見。

當元素完成更改時，將觸發change事件。 對於文本輸入，這意味着事件在失去焦點時發生 。 例如， 當我們在下面的文本字段中鍵入內容時 – 沒有事件 。 但是，當我們將焦點移到其他位置時，例如，單擊按鈕–將會發生更改事件

來源： https ： //javascript.info/events-change-input

我可以通過以下任一方法解決此問題：

• 檢查onInputFieldChange回調內部的更改。 但是您需要以某種方式保存字段的初始值，以便您可以進行比較。

• 使用其他事件觸發器。 可以使用onkeyup事件代替onchange ，該事件在按下某個鍵后立即觸發。 因為我認為，如果用戶在輸入字段中按下鍵，則可以假定某些更改是有效的。