Question

您好，我对动态步进器有疑问，我尝试为每个步骤生成带有表单的步骤。表单来自嵌套的FormGroup对象。场景是这样的：

表格：

this.formGroupNested = _formBuilder.group({
      formGroup1: _formBuilder.group({
        name: new FormControl(),
        displayName: new FormControl(),
        email: new FormControl(),
        adult: new FormControl(),
        selectField: new FormControl()
      }),
      formGroup2: _formBuilder.group({
        firstName: new FormControl(),
        lastName: new FormControl()
      })
    });

stepper.html

  <mat-horizontal-stepper [linear]="isLinear" #stepperDelivery>
    <mat-step *ngFor="let step of steps" [stepControl]="step">
        <ng-template matStepLabel>Fill out your name</ng-template>
        <!-- <form [formGroup]="step">

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

我使用过html表格，但结构不适合步进。这是工作示例，在[...]中是控件

<form
  *ngIf="messages; else loading"  
  [formGroup]="formGroupNested"
  [connectForm]="forms">
    <div
      formGroupName="formGroup1">
      <h1>{{ messages.authentication.form.steps.one.title }}</h1>
      <uland-text-field
      [formGroup]="formGroupNested.controls.formGroup1"
      [controlName]="'name'"
      [id]="'name'"
      [label]="messages.authentication.name.label"
      [placeholder]="messages.authentication.name.placeholder"
      [isReadOnly]="false"
      ></uland-text-field>
      [...]
    </div>
    <div 
      formGroupName="formGroup2">
      <h1>{{ messages.authentication.form.steps.two.title }}</h1>
      [...]
    </div>
</form>

您对如何实现此目标有任何想法吗？我考虑过使用模板别名ng-template来生成步骤。问候！

编辑：没有嵌套表单，我的步进器看起来像这样，我想它更易于维护：

  <mat-horizontal-stepper [linear]="isLinear" #stepperDelivery>
    <mat-step [stepControl]="formGroup">
        <ng-template matStepLabel>Fill out your name</ng-template>
        <cms-development-form
        [messages]="messages"
        [formGroup]="formGroupSingle">
        </cms-development-form>
    </mat-step>
  </mat-horizontal-stepper>

Answer 1

使用FormArray创建动态表单。另外，请在给定的GitHub示例中找到实现的示例：You can use the reference to create your dynamic components

TS:
  form: FormArray;

ngOnInit() {
    this.formGroup = this.formBuilder.group({
      form : this.formBuilder.array([this.init2()])
    });
  }
  addItem() {
    this.form = this.formGroup.get('form') as FormArray;
    this.form.push(this.init2());
  }
  init2() {
    return this.formBuilder.group({
      blogHeading: new FormControl('', [Validators.required]),
        });
  }
HTML:
   <form [formGroup]="formGroup">
      <mat-horizontal-stepper  formArrayName="form">
      <mat-step [formGroupName]="i" *ngFor="let customerGroup of formGroup.controls.form.controls; let i = index">
        <ng-template matStepLabel>Step {{i + 1}}</ng-template>
        <mat-form-field>
            <input matInput placeholder="blogHeading" formControlName="blogHeading" required>
            <mat-error *ngIf="!(f2.blogHeading.valid && f2.blogHeading.touched)">
              Username is Required
            </mat-error>
          </mat-form-field>
                <div>
          <button mat-button  (click)="addItem()">New Page</button>
      </div>
      </mat-step>
    </mat-horizontal-stepper>
  </form>

Angular 6 Material Stepper垫步嵌套式反应形式

1 个答案: