Не удается получить угловой материал Stepper с одной формой и формами дочерних компонентов

Question

Я пытаюсь реализовать функциональность Angular Material Stepper в нашем приложении. Исходя из документации здесь я придумал следующее решение:

civilliability-proposal-detail.component.html

<form [formGroup]="formGroup">
  <mat-horizontal-stepper labelPosition="bottom" formArrayName="formArray" #stepper>
    <mat-step formGroupName="0" [stepControl]="formArray?.get([0])" [editable]="true">
      <div>
        <ng-template matStepLabel>{{ 'proposals.details.civilLiability.stepper.details' | translate }}</ng-template>
        <app-civilliability-step1 [model]="model.details"></app-civilliability-step1>

        <button mat-button matStepperNext type="button">Next</button>
      </div>
    </mat-step>

    <mat-step formGroupName="1" [stepControl]="formArray?.get([1])" [editable]="true">
      <div>
        <ng-template matStepLabel>{{ 'proposals.details.civilLiability.stepper.antecedents' | translate }}</ng-template>
        <!-- <app-civilliability-step2 [model]="model.questionnaire"></app-civilliability-step2> -->

        <button mat-button matStepperPrevious type="button">Back</button>
        <button mat-button matStepperNext type="button">Next</button>
      </div>
    </mat-step>
  </mat-horizontal-stepper>
</form>

civilliability-proposal-detail.component.ts

get formArray(): AbstractControl | null {
  return this.formGroup.get('formArray');
}

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
  this.buildForms();
}

buildForms() {
  this.formGroup = this.formBuilder.group({
    formArray: this.formBuilder.array([this.buildDetailsForm(), this.buildQuestionnaireForm()])
  });
}

buildDetailsForm(): FormGroup {
  if (typeof this.model === 'undefined') {
    this.model = getEmptyCivilLiabilityRequest();
  }

  const formGroup = this.formBuilder.group({
    horses: new FormControl(this.model.details.horses, Validators.min(0)),
    properties: new FormControl(this.model.details.properties, Validators.min(0)),
    garages: new FormControl(this.model.details.garages, Validators.min(0)),
    ...
  });

  return formGroup;
}

buildQuestionnaireForm(): FormGroup {
  const formGroup = this.formBuilder.group({});

  return formGroup;
}

civilliability-step1.component.html

<form [formGroup]="formGroup">
  <section class="row">
    <section class="col-md-4 full-width-form">
      <mat-form-field>
        <mat-label>{{ 'proposals.details.civilLiability.horses' | translate }}</mat-label>
        <input type="number" matInput formControlName="horses" />
        <mat-error>{{ formGroup.controls['horses'].getError('server-error') }}</mat-error>
      </mat-form-field>
    </section>
    <section class="col-md-4 full-width-form">
      <mat-form-field>
        <mat-label>{{ 'proposals.details.civilLiability.terrainsWithTrees' | translate }}</mat-label>
        <input type="number" matInput formControlName="terrainsWithTrees" />
        <mat-error>{{ formGroup.controls['terrainsWithTrees'].getError('server-error') }}</mat-error>
      </mat-form-field>
    </section>
    <section class="col-md-4 full-width-form">
      <mat-form-field>
        <mat-label>{{ 'proposals.details.civilLiability.garages' | translate }}</mat-label>
        <input type="number" matInput formControlName="garages" />
        <mat-error>{{ formGroup.controls['garages'].getError('server-error') }}</mat-error>
      </mat-form-field>
    </section>
  </section>
</form>

Исходя из этого, я получаю кучу ошибок, которые, я думаю, связаны с тем фактом, что я использую дочерние компоненты в своей форме, но я не совсем уверен, как справиться с этим. Итак, есть предложения?

Я также читал кое-кого , а не , используя formArrayName в степпере, но я больше не могу найти этот пример, поэтому не могу проверить, работает ли он или нет.

Answer 1

Вместо использования массива форм я бы рекомендовал объявлять группу форм в каждом отдельном компоненте шага.Вот как я это сделал:

1. Создание компонента для сохранения степпера.
2. Создание компонента для каждого шага и его инициализация в компоненте шага.
3. Используйте переменные общедоступного компонента или определите модель для хранения пользовательского ввода.
4. Затем вы можете получить доступ к общедоступным членам каждого компонента шага в родительском шаговом компоненте через привязку данных.

Демонстрационная версия