web-dev-qa-db-ja.com

テンプレート駆動型フォームを使用したMatHorizo​​ntalStepperstepControl

テンプレート駆動型フォームで[stepControl]エラーマッチャーを使用する方法はありますか？ドキュメントはAbstractControlインスタンスについて教えているだけで、これは明らかにreactiveFormの使用を強制します。

[stepControl]="myNgForm"と[linear]="true"を使用してステップを検証しようとしましたが、ステッパーはそれを無視します。

私はどんな助けにも感謝します。

ありがとう！

angularangular-material2angular-material-stepper
9
Alexandre Ducatti

ステップコントロールは「form.control」で動作するようです。これは、ステップごとに1つのフォームとテンプレート駆動型フォームの例です。

  <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>
8
Nicolas V

[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>
3
Dhananjay kumar