MatHorizontalStepper stepControl with template driven forms

Question

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!

Do you mean form input Validation? – Abel Valdez May 09 '18 at 21:10 — Abel Valdez, May 09 '18 at 21:10

Nicolas V · Answer 1 · 2019-01-03T13:37:49.803

14

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>

edited Jan 03 '19 at 13:37

answered Jan 02 '19 at 16:59

Nicolas V

184
1
5

Doesn't work for me in Angular 10: `Property 'form1' does not exist on type 'MyComponent'` – ocket8888 Mar 05 '21 at 02:58
Should be marked as answer. – Shahryar Saljoughi Apr 19 '23 at 14:48

score 3 · Answer 2 · answered May 23 '18 at 11:20

3

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>

answered May 23 '18 at 11:20

Dhananjay kumar

31
4

Using `stepControl` and `ngModelGroup` necessarily switch to [Reactive Form programming in Angular](https://angular.io/guide/reactive-forms) isn't it? – Anthony O. May 30 '18 at 09:03

score 0 · Answer 3 · answered Mar 08 '21 at 10:22

0

The ngForm directive has a property form of type FormGroup

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

answered Mar 08 '21 at 10:22

Paul Henry LEUFANG

11
3

1

can you provide context around the link in case it ever breaks? thank you! – corn on the cob Mar 08 '21 at 10:56
This can't be considered as an answer. Elaborate how this info relates to the question and how this info leads to a practical solution to the problem. – Shahryar Saljoughi Apr 19 '23 at 14:50

MatHorizontalStepper stepControl with template driven forms

3 Answers3

Linked