如何检查每个表单控件是否以反应形式更改了它们的值？

问题描述

最后，我要实现的目的是查看表单中哪些表单控件已更改，并用它们创建一个新对象，如果更改了它们，则将布尔值分配为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做同样的事情，依此类推

解决方法

在此示例中，您可以迭代每个表单控件，并根据填充的新对象数组来确定其是否已更改。

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

这里是DEMO的堆叠闪电战

希望此解决您的要求。

,

您所需要做的只是读取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")
  }