CODEWITHSUNDEEP
angularangular-material2angular-material-stepper
Alexandre Ducatti
Alexandre Ducatti

Reputation: 141

MatHorizontalStepper stepControl with template driven forms

Is there any way to use [stepControl] error matcher with template driven forms? The docs just teach about an AbstractControl instance, which apparently forces the use of a reactiveForm.

I've tried to use [stepControl]="myNgForm" and [linear]="true" to validate the steps but the stepper just ignores it.

I appreciate any help.

Thanks!

Upvotes: 14

Views: 6683

Answers (3)

Paul Henry LEUFANG
Paul Henry LEUFANG

Reputation: 9

The ngForm directive has a property form of type FormGroup

https://angular.io/api/forms/NgForm

Upvotes: -1

Nicolas V
Nicolas V

Reputation: 212

The step control seems to work with "form.control". Here an example with one form per step and template driven forms.

  <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>

Upvotes: 17

Dhananjay kumar
Dhananjay kumar

Reputation: 31

use [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>

Upvotes: 3

Related Questions