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

或者简单地获取变量中的olds值，然后检查这些值

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

单击更新按钮Angular

1 个答案: