Как определить, обновлено значение формы или нет при нажатии кнопки обновления Angular

Question

У меня более 15 полей в форме. Если пользователь открывает форму в режиме редактирования, а значение формы не обновляется, то это показывает, что значение сообщения не изменяется при нажатии кнопки обновления. В противном случае, если значение формы изменяется, отображается сообщение «Данные обновлены».

Мне не нужно обновленное значение, мне просто нужно проверить, обновлено значение или нет при нажатии кнопки.

Ниже приведен мой код, который я пробовал, но он не работает при нажатии кнопки обновления.

HTML

<div>
  <form id="editfrm" [formGroup]="Editunit">
    <div>
    <input type="text" formControlName="name"  />
    </div>
    <div>
    <input type="text" formControlName="code"  />
    </div>
 </form>
 </div>

 <footer>
<button class="btn btn-secondary" type="reset" (click)="update(Editunit.value)">Edit</button>
</footer>

// Файл Component.ts

 update(Editunit?) {
    this.Editunit.valueChanges.subscribe((data) => {
        if(data is changed){
            alert("Data updated");
        }else{
             alert("form not updated");
        }      
      return;
    });   
}

Answer 1

вы можете подписаться на valueChanges формы и использовать попарно, чтобы проверить, было ли изменение, иначе, если вы «измените» вход с тем же значением Angular даст вам измененное значение

changed:boolean=false;

this.form.valueChanges.pipe(
      takeWhile(()=>!this.changed),
      startWith(this.form.value),
      pairwise()
      ).subscribe(([old,value])=>{
        let change=false;
        Object.keys(old).forEach(k=>{
          change=change || old[k]!=value[k]
        })
      this.changed=change;
    })

Или просто получить старые значения в переменной и проверить значения

this.oldValues={...this.form.value} //after create the form

isChanged()
{
  let change=false;
  Object.keys(this.oldValues).forEach(k=>{
     change=change || this.oldValues[k]!=this.form.value[k]
  })
  return change
}

См. stackblitz