如果沒有使用 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>