具有动态形式的 Angular 5 Mat-Stepper

Question

是否可以将动态逻辑添加到 Material 步进器中？

我正在使用:

1. 应用程序接口(interface)
   从“@angular/material/stepper”导入 {MatStepperModule}；
2. https://angular.io/guide/dynamic-form

怎么调用

<app-dynamic-form [questions]="questions"></app-dynamic-form>

进入mat-stepper的表单组？

Answer 1

我自己的项目需要这样的东西，我需要向 stepper 提出一大堆问题，每个问题一个。因此，经过长时间的尝试，我设法将我们可以在 https://material.angular.io 中找到的内容放在一起。关于步进器，来自 PluralSight 的 Deborah Kurata 的 Reactive 表单和来自此答案的 stackblitz 演示 https://stackoverflow.com/posts/46469671/revisions ，在这里:

为您的模板

                <mat-step *ngFor="let stepp of steps?.controls; let i=index" formGroupName="{{i}}" [stepControl]="steps?.get([i])">
                    <ng-template matStepLabel>Fill out your name</ng-template>
                    <mat-form-field>
                    <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
                    </mat-form-field>
                    <div>
                    <button mat-button matStepperNext>Next</button>
                    </div>
                </mat-step>

    </mat-horizontal-stepper>
</form>

为您的组件

    import { Component, OnInit } from '@angular/core';
    import { FormGroup, FormControl, FormBuilder, Validators, AbstractControl, ValidatorFn, FormArray } from '@angular/forms';

    import { MatStepperModule } from '@angular/material/stepper';

    @Component({
      selector: 'app-test-questions',
      templateUrl: './test-questions.component.html',
      styleUrls: ['./test-questions.component.css']
    })
    export class TestQuestionsComponent implements OnInit {
      isLinear = true;

      questionsForm: FormGroup;

       get steps(): FormArray{
        return<FormArray>this.questionsForm.get('steps'); // Must be <FormArrary> so it's not abstract control
      } 
  constructor(private testService: TestService, private _formBuilder: FormBuilder) { }
  ngOnInit() {


    this.questionsForm = this._formBuilder.group({
      steps: this._formBuilder.array([
        // this.buildStepper()
        this._formBuilder.group({
          firstCtrl: ['', Validators.required],
        }),
        this._formBuilder.group({
          firstCtrl: ['asfsf', Validators.email]
        })
      ]) // Must be using form array
    });

  }

}