Вложенные формы в угловом материале Stepper вызывают ExpressionChangedAfterItHasBeenCheckedError

Question

Я пытаюсь разделить Угловой материал mat-step (из mat-horizontal-stepper) на отдельные вложенные компоненты подформ и получить ExpressionChangedAfterItHasBeenCheckedError относительно достоверности формы.

Этот стек показывает, что проблема: https://stackblitz.com/edit/mat-stepper-components

Вложенные компоненты находятся на первом этапе.

Интересно, что проблема не возникает, если существует только один уровень вложенности (если у шагов нет вложенных подформ), как показано на втором шаге.

Вот основные части кода:

создать-profile.component.html

<mat-horizontal-stepper [linear]=true #stepper>
    <mat-step [stepControl]="frmStepOne">
        <ng-template matStepLabel>Step One Details</ng-template>
        <form [formGroup]="frmStepOne"><ng-template matStepLabel>Step One</ng-template>
            <step-one-component></step-one-component>
        </form>
  </mat-step>
    <mat-step [stepControl]="frmStepTwo">
        <ng-template matStepLabel>Step Two Details</ng-template>
        <form [formGroup]="frmStepTwo">
            <step-two-component></step-two-component>
        </form>
    </mat-step>
</mat-horizontal-stepper>

создать-profile.component.ts

  //...
  constructor(private fb: FormBuilder) {
    this.frmStepOne = new FormGroup({});
    this.frmStepTwo = new FormGroup({});
  }

шаг one.component.html

<step-one-child-one></step-one-child-one>

шаг one.component.ts

// nothing interesting, just component boilerplate

шаг один-ребенок-one.component.html

<mat-form-field>
  <input matInput formControlName="name" placeholder="Name" required>
</mat-form-field>

шаг один-ребенок-one.component.ts

@Component({
  selector: 'step-one-child-one',
  templateUrl: './step-one-child-one.component.html',
  viewProviders: [
    {
      provide: ControlContainer,
      useExisting: FormGroupDirective
    }
  ]
})
export class StepOneChildOneComponent {
  constructor(private parent: FormGroupDirective) {
  }

  ngOnInit() {
    this.parent.form.addControl('name', new FormControl('', [Validators.required]));
  }
}

Answer 1

Вам необходимо реализовать обнаружение изменений.

Пожалуйста, обновите create-profile.component.ts следующим кодом

import { Component, ViewChild, Input, ChangeDetectorRef, AfterViewChecked } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { MatStepper } from '@angular/material';
import { StepOneComponent } from './step-one.component';
import { StepTwoComponent } from './step-two.component';
import { StepThreeComponent } from './step-three.component';

@Component({
  selector: 'create-profile-component',
  templateUrl: './create-profile.component.html'
})

export class CreateProfileComponent implements AfterViewChecked {

  frmStepOne: FormGroup;
  frmStepTwo: FormGroup;
  @ViewChild('StepTwoComponent') stepThreeComponent: StepThreeComponent;

  get frmStepThree() {
    return this.stepThreeComponent ? this.stepThreeComponent.frmStepThree : null;
  }

  constructor(private fb: FormBuilder,
  private changeDetect: ChangeDetectorRef) {
    this.frmStepOne = new FormGroup({});
    this.frmStepTwo = new FormGroup({});
  }

  ngAfterViewChecked(): void {
    this.changeDetect.detectChanges();
  }


}

Answer 2

После некоторого копания я понял, что есть больше ошибок, когда формы вложены более чем на 1 уровень.

В итоге я переместил срок действия формы с step-one на create-profile и использовал его для установки атрибута completed для mat-step.

Тогда у меня есть только один уровень вложенности, и все отлично работает:)