When using Angular Material stepper, we can easily bind form controls with form groups like
[stepControl]="myFormGroup"FormArray inside a formGroup?
Constructor
constructor(private _fb: FormBuilder){}
FormArray inside FormGroup
this.myFormGroup = this._fb.group({
skills: this._fb.array([this.init()])
}
This is the init function to create a new formGroup
init(){
return this._fb.group({
skill1: ['', Validators.required],
skill2: ['', Validators.required],
skill3: ['', Validators.required],
skill4: ['', Validators.required],
})
}
This is my code for mat-step
<mat-stepper linear #stepper>
<mat-step [stepControl]="myFormGroup" [editable]="isEditable">
<form [formGroup]="myFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
// Form Fields Goes here
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
</mat-stepper >
Now the issue is how can I set [stepControl] to my FormArray which is skills? If the skills are not valid, it should prevent moving to the next step.