时间戳

首页 > 解决方案 > 如何在单击更新按钮Angular时检测表单值是否更新

javascript - 如何在单击更新按钮Angular时检测表单值是否更新

问题描述

我在表单中有超过 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;
    });   
}

标签： javascriptangularangular-material

解决方案

您可以订阅表单的 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

推荐阅读