Question

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

我正在使用：

API
import {MatStepperModule} from '@angular/material/stepper';
https://angular.io/guide/dynamic-form

我该如何致电

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

进入mat-stepper的表单组？

Answer 1

对于我自己的项目，我需要这样的东西，在该项目中，我需要给步进器提供很多问题，每一步都要解决一个问题。因此，经过长时间的尝试，我设法在https://material.angular.io中找到有关步进器的信息，来自PluralSight的Deborah Kurata的Reactive表单以及来自此答案https://stackoverflow.com/posts/46469671/revisions的stackblitz演示，

针对您的模板

                <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
    });

  }

}

Angular 5 Mat-Stepper具有动态形式

1 个答案: