'In angular linear stepper not able to move next step?
I am using angular linear stepper. for each step i am using seprate formGroup. In formGroup some fields are optional. when i fill optional input part it works or when it is empty it does not work.
FormGroup for step 1
formVal=new FormBuilder.group({
fName:['',Validators.required],
lName:[''] //Optional part
})
when i enter lname then only it goes to next step. I want to move to next step even there is no lName.
<mat-stepper #stepper [linear]="true">
<mat-step [stepContol]="formVal" >
<form [formGroup]="formVal">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field appearance="fill">
<mat-label>Name</mat-label>
<input matInput formControlName="fName" placeholder="First name">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>last Name</mat-label>
<input matInput formControlName="lName" placeholder="Last name">
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="step_2" >
<form [formGroup]="step_2">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field appearance="fill">
<mat-label>Address</mat-label>
<input matInput formControlName="add" placeholder="Ex. 1 Main St, New York, NY"
required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
</mat-stepper>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
