单击更新按钮 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>

//组件.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
}

见堆栈闪电战