表单上的渲染按钮更改

Question

我有一个带有一些按钮的模块化页脚，我希望这些按钮仅在更改表单上的某些内容时才呈现。我有两种形式，firstFormGroup和secondFormGroup。有帮助吗？

我的错误消息是这样处理的：

<mat-error *ngIf="firstFormGroup.get('location').invalid">
                                            {{'csa.enter-value' | translate}}
                                        </mat-error>

我正试图对我的组件做同样的事情。

<csa-savebar>
    <form class="form-bar" *ngIf="this.isChanged()">
        <button (click)="save(firstFormGroup)" class="btn btn-save">
            <mat-icon>check_circle</mat-icon>
            {{'csa.profile.save' | translate}}
        </button>
        <button (click)="discardChanges()" class="btn btn-discard">
            <mat-icon>highlight_off</mat-icon>
            {{'csa.profile.discard' | translate}}
        </button>
    </form>
</csa-savebar>

isChanged() {
    /* const controllersToCheck = [
      'location',
      'address',
      'postal',
      'city',
      'country',
      'category',
      'area',
      'phone',
      'website',
      'email',
      'isSelected',
      'from',
      'to',
      'splitedFrom',
      'splitedTo',
      'description',
    ]
    return controllersToCheck.some(ctrlName => {
      let firstCtrl = this.firstFormGroup.get(ctrlName)
      let secondCtrl = this.secondFormGroup.get(ctrlName)

      return (firstCtrl.dirty || firstCtrl.touched) && (secondCtrl.dirty || secondCtrl.touched)
    }) */
    return (this.firstFormGroup.dirty || this.firstFormGroup.touched) && (this.secondFormGroup.dirty || this.secondFormGroup.touched)
  }

private buildInitalFormGroup() {
    this.firstFormGroup = this.formBuilder.group({
      location: ['', Validators.required],
      address: ['', Validators.required],
      postal: new FormControl('', ZipCodeValidation),
      city: ['', Validators.required],
      phone: ['', PhoneNumberValidation],
      area: ['+49', PhoneNumberPrefixValidation],
      country: ['Germany', Validators.required],
      category: ['', Validators.required],
      email: ['', EmailValidation],
      description: ['', Validators.required],
      website: [
        '',
        Validators.compose([
          Validators.required,
          CustomValidators.patternValidator({
            invalidSite: true,
          }),
        ]),
      ],
      openHours: this.formBuilder.array(this.buildOpenHoursArray()),
    })

    this.secondFormGroup = this.formBuilder.group({
      payments: ['', Validators.required],
    })

    this.categories = CategoriesArray()

    this.hours = OpenHoursArray()
  }

错误TypeError：无法读取未定义的属性“ dirty”     在ProfileFormComponent.push ../ src / app / features / profile / components / profile-form.component.ts.ProfileFormComponent.isChanged（