How to disable Save button, if there is no edit made in input field using Angular8-CodePudding

I am using Angular8 application and in this i have added inline edit using ngModel, but in this i have to keep Save button disabled, if there is no change in the input fields, if there is any change among 3 fields then save button should be enabled.

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;
  }

DEMO

CodePudding user response：

I tried to understand the issue and made a few modifications, it did work as expected.

First: define a boolean variable called disabled

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

The first time when the edit is clicked, it will be true, and the save button will be disabled.

Second change the onChangeModel function, check if the value in the field is changed, if yes, re-activate the save button otherwise it will be disabled.

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

lastly return the valuable disable in the getter function

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

Now call this getter function on the save button

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