In my Angular-11, I have this Material stepper:
Foremost, I have this signin component typescript:
import {
Component,
OnInit
} from '@angular/core';
import {
FormBuilder,
FormGroup,
Validators
} from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isLinear = true;
formNameGroup: FormGroup;
formPasswordGroup: FormGroup;
formEmailGroup: FormGroup;
formPhoneGroup: FormGroup;
constructor(private fb: FormBuilder) {
this.createForm();
}
ngOnit() {}
createForm() {
this.formNameGroup = this.fb.group({
userName: ['', Validators.required]
});
this.formPasswordGroup = this.fb.group({
passWord: ['', Validators.required]
});
this.formEmailGroup = this.fb.group({
emailID: ['', Validators.compose([Validators.required, Validators.email])]
});
this.formPhoneGroup = this.fb.group({
mobile: ['', Validators.compose([Validators.required, Validators.min(10)])]
});
}
onSubmit() {
return this.api.post('signup', data, header)
}
}After the user sigin compnent.ts, I have this sigin html as shown below:
<h2 align="center"> Material Stepper Example </h2>
<mat-horizontal-stepper [linear]="isLinear" #stepper labelPosition="bottom">
<mat-step [stepControl]="formNameGroup" label="Name">
<div style="padding-top: 3%;">
<form [formGroup]="formNameGroup">
<!-- <ng-template matStepLabel>Name</ng-template> -->
<div class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="Name" required formControlName="userName">
<mat-error *ngIf="formNameGroup.controls['userName'].hasError('required')">
Username is required!
</mat-error>
</mat-form-field>
</div>
<br/>
<button mat-raised-button color="primary" matStepperNext>Next</button>
</form>
</div>
</mat-step>
<mat-step [stepControl]="formPasswordGroup" label="Password">
<div style="padding-top: 3%;">
<form [formGroup]="formPasswordGroup">
<!-- <ng-template matStepLabel>Name</ng-template> -->
<div class="example-form">
<mat-form-field class="example-full-width">
<input type="password" matInput placeholder="Password" required formControlName="passWord">
<mat-error *ngIf="formPasswordGroup.controls['passWord'].hasError('required')">
Password is required!
</mat-error>
</mat-form-field>
</div>
<br/>
<button mat-raised-button color="primary" matStepperNext>Next</button>
</form>
</div>
</mat-step>
<mat-step [stepControl]="formEmailGroup" label="Email">
<div style="padding-top: 3%;">
<form [formGroup]="formEmailGroup">
<!-- <ng-template matStepLabel>Name</ng-template> -->
<div class="example-form">
<mat-form-field class="example-full-width">
<input type="text" matInput placeholder="Email" required formControlName="emailID">
<mat-error *ngIf="formEmailGroup.controls['emailID'].hasError('required')">
Email is required!
</mat-error>
<mat-error *ngIf="formEmailGroup.controls['emailID'].hasError('email')">
Email is not Valid!
</mat-error>
</mat-form-field>
</div>
<br/>
<button mat-raised-button color="primary" matStepperNext>Next</button>
</form>
</div>
</mat-step>
<mat-step [stepControl]="formPhoneGroup" label="Mobile">
<div style="padding-top: 3%;">
<form [formGroup]="formPhoneGroup">
<!-- <ng-template matStepLabel>Name</ng-template> -->
<div class="example-form">
<mat-form-field class="example-full-width">
<input type="tel" matInput placeholder="Mobile" required formControlName="mobile">
<mat-error *ngIf="formPhoneGroup.controls['mobile'].hasError('required')">
Mobile is required!
</mat-error>
<mat-error *ngIf="formPhoneGroup.controls['mobile'].hasError('min')">
Mobile No is Wrong!
</mat-error>
</mat-form-field>
</div>
<br/>
<button mat-raised-button color="primary" matStepperNext>Next</button>
</form>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>Review</ng-template>
<h5>You are now done.</h5>
<div>
<button mat-raised-button color="primary" matStepperPrevious>Back</button>
<button mat-raised-button color="accent" type="submit">Submit</button>
<button mat-raised-button color="warn" (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
<!-- <ng-template matStepperIcon="phone">
<mat-icon>phone</mat-icon>
</ng-template> -->
</mat-horizontal-stepper>I am using material stepper.
I got confused since there are more than one form and form groups. How do I post all the data into the database using the submit button?
Thanks