angular - 无法使用单个表单和子组件表单工作的 Angular Material 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，但我似乎再也找不到这个例子了，所以无法测试它是否有效。

标签： angularangular-material-stepper

Answer 1

我建议不要使用表单数组，而是在每个单独的步骤组件中声明一个表单组。以下是我的做法：

1. 创建一个组件来保留步进器。
2. 为每个步骤创建一个组件，并在步骤组件中对其进行初始化。
3. 使用公共组件变量或定义模型以保留用户输入。
4. 然后，您可以通过数据绑定访问父步进器组件中每个步进器组件的公共成员。

现场演示