Angular 如何以反应形式检测更新的值并仅将其作为有效负载发送

我有一个更新组件，我只想将更改后的表单值发送到某个后端更新端点。出于某种原因，如果我只更新一个表单输入，则会显示其余的值。我已经实现了一种方法来检查空表单值，并将它们从下面的.ts文件所示的有效负载对象

中删除，该方法可以工作，但现在我只想检测更改的表单值&只发送它们。我应该使用哪种方便的方法来解决此问题

TS文件

this.form = this.fb.group({
  business_name: new FormControl(''),
  business_activity: new FormControl(''),
  business_id: new FormControl(''),
  pin_number: new FormControl(''),
  activity_code: new FormControl(''),
  po_box: new FormControl(''),
  town: new FormControl(''),
  physical_address: new FormControl(''),
  plot_number: new FormControl(''),
  contact_person_name:  new FormControl(''),
  contact_person_phone:  new FormControl(''),
  applicantName: new FormControl(''),
  sub_county_name: new FormControl(''),
  ward_name: new FormControl(''),
  applicantPhone: new FormControl(''),
  licenseActivity: new FormControl(''),
  fee: new FormControl(''),
});

onClickUpdate(){
    const payload = this.form.value;
    // Remove empty string
    Object.keys(payload).forEach((key) => (payload[key] === '') && delete payload[key]);
    console.log(JSON.stringify(payload))

}

HTML文件

<form [formGroup]="form" class="add-new-license">
  <div class="controls-container row">
    <mat-form-field>
      <input
        type="text"
        formControlName="business_name"
        matInput
        placeholder="Business Name"
        [(ngModel)]="license.business.business_name"
      />
    </mat-form-field>

    <mat-form-field>
      <input
        type="text"
        matInput
        formControlName="business_id"
        placeholder="Business ID"
        [(value)]="license.business.business_id"
      />
    </mat-form-field>

    <mat-form-field>
      <input
        type="text"
        matInput
        formControlName="pin_number"
        placeholder="Pin Number"
        [(value)]="license.business.pin_number"
      />
    </mat-form-field>

    <mat-form-field>
      <input
        type="text"
        matInput
        formControlName="po_box"
        placeholder="Po Box"
        [(value)]="license.business.po_box"
      />
    </mat-form-field>

    <mat-form-field>
      <input
        type="text"
        matInput
        formControlName="town"
        placeholder="Town"
        [(value)]="license.business.town"
      />
    </mat-form-field>

    <mat-form-field>
      <input
        type="text"
        formControlName="physical_address"
        matInput
        placeholder="Physical Address"
        [(value)]="license.business.physical_address"
      />
    </mat-form-field>

    <mat-form-field>
      <input
        type="text"
        matInput
        formControlName="sub_county_name"
        placeholder="SubCounty"
        [(value)]="license.business.sub_county_name"
      />
    </mat-form-field>

    <mat-form-field>
      <input
        type="text"
        matInput
        formControlName="ward_name"
        placeholder="Ward"
        [(value)]="license.business.ward_name"
      />
    </mat-form-field>

    <mat-form-field>
      <input
        type="text"
        matInput
        formControlName="plot_number"
        placeholder="Plot Number"
        [(value)]="license.business.plot_number"
      />
    </mat-form-field>

    <mat-form-field>
      <input
        type="text"
        matInput
        formControlName="contact_person_phone"
        placeholder="Phone"
        [(value)]="license.contact_person_phone"
      />
    </mat-form-field>

    <mat-form-field>
      <input
        type="text"
        matInput
        formControlName="contact_person_name"
        placeholder="Contact Person Name"
        [(value)]="license.contact_person_name"
      />
    </mat-form-field>

    <!--
    <mat-form-field>
      <input type="text" matInput placeholder="Applicant Name" formControlName="applicantName">

    </mat-form-field> -->

    <!-- <mat-form-field id="business-name">
      <input type="text" matInput placeholder="Applicant Phone" formControlName="applicantPhone">

    </mat-form-field> -->

    <br />
    <mat-form-field matTooltip="Select license activity">
      <!-- <input type="text" matInput placeholder="License Activity" formControlName="licenseActivity"> -->
      <mat-label style="color: black">License Activity</mat-label>
      <mat-select formControlName="licenseActivity">
        <!-- <mat-option>None</mat-option> -->
        <mat-option
          id="schedule-options"
          *ngFor="let category of liquorCategories"
          [value]="category.id"
          matTooltip="{{ getCategoryToolTipData(category.name) }}"
        >
          {{ category.name }}</mat-option
        >
      </mat-select>
      <div
        *ngIf="submitted && f.licenseActivity.errors"
        class="invalid-feedback"
      >
        <div *ngIf="f.licenseActivity.errors.required">
          License Activity is required
        </div>
      </div>
    </mat-form-field>

    <mat-form-field matTooltip="select only liquor application fee.">
      <mat-label style="color: black">Fee</mat-label>
      <mat-select formControlName="fee">
        <mat-option *ngFor="let fee of fees" [value]="fee.id">
          {{ fee.description }}: {{ fee.amount }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div class="row" id="submit-btn-section">
    <button
      mat-raised-button
      (click)="onClickUpdate()"
      id="submit-button"
      matTooltip="submit information"
    >
      UPDATE LICENSE
    </button>
  </div>
</form>




许可证活动
{{category.name}
需要许可证活动
费用
{{fee.description}}:{{fee.amount}
更新许可证
您可以将事件绑定到每个控件。您还可以从控件获取“pristine”属性

因此，一个好主意是（例如）捕获表单的已更改事件，并检查每个控件的
pristine
属性。当
pristine
为真时，该值不会更改。如果为false，则会更改该值

您可以使用表单在其控件之间循环，这样您几乎可以以自动方式执行此操作。
尝试此逻辑，以获得反应式表单中的仅更新值！
希望它对所有人都有用
 它成功了，我看到另一个实现使用了
distinctUntilChanged
，但我还没有使用它。这就可以了，而且肯定会从文档中查找它。
   getUpdatedValue(form: any) {

       var changedValues = {};

        Object.keys(form.controls)
            .forEach(key => {
                let currentControl = form.controls[key];

                if (currentControl.dirty) {
                    if (currentControl.controls)
                        changedValues[key] = this.getUpdatedValue(currentControl);
                    else
                        changedValues[key] = currentControl.value;
                }
            });

        return changedValues;
}