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回调中的更改。但是您需要以某种方式保存字段的初始值，以便您可以进行比较。
使用其他事件触发器。您可以使用onchange事件来代替onkeyup，该事件会在您按下键后立即触发。因为我认为如果用户在输入字段中按下键，则可以假设某些更改是有效的。

如何在Angular中使按钮禁用而没有焦点效果？

1 个答案: