如果没有使用 Angular8 在输入字段中进行编辑，如何禁用保存按钮

Question

我正在使用 Angular8 应用程序，在此我使用 ngModel 添加了内联编辑，但在此我必须禁用保存按钮，如果输入字段没有变化，如果 3 个字段之间有任何变化，那么保存按钮应该是启用。

HTML：

  <ng-container *ngFor="let contact of yearManagement">
      <tr>
        <td></td>
        <td class="text-capitalize">
          <ng-container *ngIf="editableRow !== contact.id; else newDeb">
            {{contact.policyTypeName}}
          </ng-container>
          <ng-template #newDeb>
            <input [(ngModel)]="contact.policyTypeName" />
          </ng-template>
        </td>
        <td>
          <ng-container *ngIf="editableRow !== contact.id; else newDeb1">
            {{contact.quotes}}
          </ng-container>
          <ng-template #newDeb1>
            <input [(ngModel)]="contact.quotes" (ngModelChange)="onModelChange(oldVal, $event); oldVal = $event;"/>
          </ng-template>
        </td>
        <td>
          <ng-container *ngIf="editableRow !== contact.id; else newDeb2">
            {{contact.policyCT}}
          </ng-container>
          <ng-template #newDeb2>
            <input [(ngModel)]="contact.policyCT" />
          </ng-template>
        </td>
        <td>
          <ng-container *ngIf="editableRow !== contact.id; else newDeb3">
            {{contact.writtenPremium}}
          </ng-container>
          <ng-template #newDeb3>
            <input [(ngModel)]="contact.writtenPremium" />
          </ng-template>
        </td>
        <td class="width125">
          <ng-container *ngIf="editableRow == contact.id;">
            <button class="btn btn-outline-primary btn-table" title="close"
            (click)="onCloseEvent(contact)"
           >close</button>
            <button class="btn btn-outline-primary btn-table" title="close" (click)="onSave(contact)" [disabled]="disableSubmit()"
              >save</button>
          </ng-container>
          <ng-container *ngIf="editableRow !== contact.id;">

            <button class="btn btn-outline-primary btn-table ml-1" title="Edit"
          (click)="[editableRow = contact.id,onEditEvent(contact)]">Edit</button>
          </ng-container>
          <button class="btn btn-outline-primary btn-table ml-1" title="Delete"
                      (click)="deleteCommitment(contact)">Delete</button>
        </td>
      </tr>
    </ng-container>

TS：

 public disableSubmit() {
    let disabled = true;
    const keys = Object.keys();
    keys.forEach(key => {
      if () {
        disabled = false;
        return;
      }
    });
    return disabled;
  }
  

演示

Answer 1

我试图理解这个问题并做了一些修改，它确实按预期工作。

首先：定义一个名为 disabled 的布尔变量

selectedRow: any;
disable: boolean;
public onEditEvent(event) {
  this.disable = true;
  this.selectedRow = { ...event };
  this.editCommitment = event;
 }

第一次点击edit时为true，并禁用保存按钮。

第二次更改onChangeModel函数，检查字段中的值是否改变，如果改变，重新激活保存按钮，否则将被禁用。

oldValue: string;
onModelChange(oldval, event) {
 if (event) {
    this.disable = false;
    console.log(oldval, event);
    if (this.oldValue != event) {
    }
    this.oldValue = event;
  }
 }

最后在 getter 函数中返回有价值的禁用

public get disableSubmit() {
  return this.disable;
}

现在在保存按钮上调用这个 getter 函数

       <button
          class="btn btn-outline-primary btn-table"
          title="close"
          (click)="onSave(contact)"
          [disabled]="disableSubmit"
        >
          save
        </button>