如何检查每个表单控件是否在响应式表单中更改了它们的值？答案

【问题标题】：How to check if each form control changed their value in reactive forms?如何检查每个表单控件是否在响应式表单中更改了它们的值？
【发布时间】：2020-12-04 04:13:09
【问题描述】：

我最终想要实现的是查看我的表单中的哪些表单控件已单独更改，并创建一个新对象，如果它们被更改，则分配一个布尔值 true，否则为 false。请看下面我到目前为止所取得的成就，但我认为这不是正确的方法，因为当我从控件中获得更多收益时，我的方法将变得巨大。如果你们知道我该如何解决这个问题，我将不胜感激。

我的 HTML

<form [formGroup]="editProfileForm">
      <ion-row>
        <ion-col>
          <ion-input
            *ngIf="profileData"
            formControlName="firstName"
            placeholder="First Name"
          ></ion-input>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col>
          <ion-input
            *ngIf="profileData"
            formControlName="lastName"
            placeholder="Last Name"
          ></ion-input>
        </ion-col>
      </ion-row>
</form>

<ion-fab
    vertical="bottom"
    horizontal="center"
    slot="fixed"
    (click)="onSubmitEditedProfile()">
    <ion-fab-button>
      <ion-icon name="checkmark-outline"></ion-icon>
    </ion-fab-button>
</ion-fab>

我的 TS

  onSubmitEditedProfile() {
    if (this.profileData !== null) {
      let updatedFirstName = this.editProfileForm.get("firstName").value;
      if (this.profileData.firstname !== updatedFirstName) {
      }
      console.log("it's the same");
    } else {
      console.log("it's different")
  }

按照我的方法，我会为lastName 等做同样的事情

【问题讨论】：

是的...但是您真正需要什么？每个表单控件已经有一个可用的状态来查看它是否被弄乱了（脏）..那么你为什么要为此添加另一个道具..？
对不起，如果我不是很清楚，我想检查每个表单控件是否已更改，最后，当我将数据发送到后端时，我想发送一个带有值的对象表单控件以及一个具有相同键值的对象，如果值已更改，则分配 true，否则，当后端更新值以仅在已更新的值上运行代码时，分配 false。你提到脏，我可以这样做并检查每个表单控件吗？我已经尝试过，但如果表单已更改，它会返回 true 或 false，而不是每个表单控件
您可以基本上通过循环 form.controls 来检查 submitHandler 中的每个控件（所以不要使用 form.values） - 并创建您想要发送到服务器的确切自定义对象。跨度>
@Alexandra 我收到您的问题，请稍后提交修复。

标签： html angular typescript angular-reactive-forms reactive-forms

【解决方案1】：

您只需要读取 FormGroup 或单个 FormControl 上的脏值

https://angular.io/api/forms/AbstractControl#dirty

  onSubmitEditedProfile() {
    if (!this.editProfileForm.dirty) {
      console.log("it's the same");
    } else {
      console.log("it's different")
  }

【讨论】：

请注意，这表示值已更改，但与原始值并没有不同。 IE。如果你改变了这个值，然后把它改回来，dirty 仍然是true。

【解决方案2】：

这是一个示例，您可以迭代每个表单控件并根据填充的新对象数组来识别它是否已更改。

  onSubmitEditedProfile() {
   const formValue = [];
   // iterate over form controls no matter how many control you have.
   Object.keys(this.form.controls).map((key) => {
     // create a new parsed object 
     const parsedValue = {
      [key]: this.form.get(key).value, // key is the actual form control name
      changed: this.form.get(key).dirty // added changed key to identify value change
     }

    // push each parsed control to formValue array.
    formValue.push(parsedValue)
  })

  console.log(formValue)
 }

这里是stackblitz 工作DEMO

希望这能满足您的要求。

【讨论】：

dirty 属性有一个缺点，如果您更改值并在之前再次设置它，那么它会将其标记为已更改，但该控件的实际值不会更改。前任。值为“karan”，将其更改为“karans”，然后更改回“karan”，然后显示为已更改，但实际值仍然相同