MatHorizo​​ntalStepper stepControl具有模板驱动的表单

Question

有什么方法可以将[stepControl]错误匹配器与模板驱动的表单一起使用？这些文档只是讲授了一个AbstractControl实例，该实例显然强制使用了reactForm。

我试图使用[stepControl]="myNgForm"并[linear]="true"验证步骤，但步进器只是忽略了它。

感谢您的帮助。

谢谢！

Answer 1

步骤控件似乎可以与“ form.control”一起使用。这里有一个示例，其中每个步骤一个表单和模板驱动的表单。

  <mat-vertical-stepper [linear]="true">
    <mat-step [stepControl]="form1.control">
       <form #form1="ngForm">
          <input [(ngModel)]="name" name="name" required />
       </form>
    </mat-step>
    <mat-step [stepControl]="form2.control">
       <form #form2="ngForm">
          <input [(ngModel)]="address" name="address" required />
       </form>
    </mat-step>
  </mat-vertical-stepper>

Answer 2

使用 [stepControl]="myNgForm.controls.[controlGroup]"

<form #form="ngForm" novalidate>
  <mat-vertical-stepper [linear]="true">
    <mat-step label="Reporting person" ngModelGroup="reportor" [stepControl]="form.controls.reportor">
       <mat-form-field>
          <input matInput placeholder="First Name" name="firstName" ngModel required />
       </mat-form-field>
    </mat-step>
  </mat-vertical-stepper>
</form>