Я использую mat-stepper из Angular Библиотека дизайна материалов.
Я использую 4 отдельные FormGroups. Я бы отправил информацию о первых 3 formGroup, чтобы объединить и 4 отдельно. На третьем этапе нажмите кнопку «Отправить», чтобы объединить 3 группы форм и отправить их одному API, а семейство 4-х групп - отправить другому API. и есть какое-то решение для этого .. спасибо за продвижение
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
thirdFormGroup: FormGroup;
fourthFormGroup: FormGroup;
rows: FormArray;
constructor(private formBuilder: FormBuilder) {
}
ngOnInit() {
this.firstFormGroup = this.formBuilder.group({
name : ['', Validators.required],
gender : ['', Validators.required]
});
this.secondFormGroup = this.formBuilder.group({
permanentHouseName: ['', Validators.required],
permanentHouseNumber: ['', Validators.required],
permanentPlace: ['', Validators.required]
});
this.thirdFormGroup = this.formBuilder.group({
profession : ['', Validators.required],
designation : ['', Validators.required],
});
this.fourthFormGroup = this.formBuilder.group({
items: [null],
items_value: ['no']
});
this.rows = this.formBuilder.array([]);
this.fourthFormGroup.addControl('rows', this.rows);
this.onAddRow()
}
form1(){
console.log(this.firstFormGroup.value)
}
form2(){
console.log(this.secondFormGroup.value)
}
form3(){
console.log(this.thirdFormGroup.value)
}
onSubmit(){
}
form4(){
console.log("value",this.fourthFormGroup.value)
console.log("array",this.rows.value)
}
onAddRow() {
this.rows.push(this.createItemFormGroup());
}
onRemoveRow(rowIndex:number){
this.rows.removeAt(rowIndex);
}
createItemFormGroup(): FormGroup {
return this.formBuilder.group({
name: null,
age: null,
relation: null
});
}
шаблон
<mat-horizontal-stepper labelPosition="bottom" #stepper>
<mat-step [stepControl]="firstFormGroup" errorMessage="Personal Details are required.">
<form [formGroup]="firstFormGroup" (ngSubmit)="form1()" #formone="ngForm">
<ng-template matStepLabel>Details</ng-template>
<br>
<div class="row">
<div class="col-sm" >
<input type="text" class="form-control" placeholder="Enter Applicant Name Here ..." formControlName="name" required>
</div>
<div class="col-sm" >
<input type="radio" value="male" formControlName="gender" checked required> Male
<input type="radio" value="female" formControlName="gender" required> Female
<input type="radio" value="others" formControlName="gender" required> Others
</div>
</div>
<br>
<div style="text-align: right;">
<button class="btn btn-success" style="width: 250px;" mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup" errorMessage="Address is required.">
<form [formGroup]="secondFormGroup" (ngSubmit)="form2()" #formtwo="ngForm">
<ng-template matStepLabel>Address</ng-template>
<br>
<div>
1. Permanent Address
</div>
<div class="row">
<div class="col-sm" >
<input type="text" class="form-control" placeholder="House Name ..." formControlName="permanentHouseName" required>
</div>
<div class="col-sm" >
<input type="text" class="form-control" placeholder="House Number ..." formControlName="permanentHouseNumber" required>
</div>
<div class="col-sm" >
<input type="text" class="form-control" placeholder="Place ..." formControlName="permanentPlace" required>
</div>
</div>
<br>
<br>
<div style="text-align: right;">
<button class="btn btn-secondary" style="width: 250px;" mat-button matStepperPrevious>Back</button>
<button class="btn btn-success" style="width: 250px;" mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="thirdFormGroup" errorMessage="Profession Details are required.">
<form [formGroup]="thirdFormGroup" (ngSubmit)="form3()" #formthree="ngForm">
<ng-template matStepLabel>Profession Details</ng-template>
<br>
<br>
<div class="row">
<div class="col-sm" style=" font-family: 'IBM Plex Sans'">
<input type="text" class="form-control" placeholder="Profession ..." formControlName="profession" required>
</div>
<div class="col-sm" style=" font-family: 'IBM Plex Sans'">
<input type="text" class="form-control" placeholder="Designation ..." formControlName="designation" required>
</div>
<div class="col-sm" style=" font-family: 'IBM Plex Sans'">
<!-- <input type="text" class="form-control" placeholder="Designation ..." formControlName="thirdCtrl" required> -->
</div>
</div>
<br>
<div style="text-align: center;">
<button class="btn btn-info" type="submit" (click)="onSubmit()" style="width: 250px;" >Submit</button>
</div>
<br>
<div style="text-align: right;">
<button class="btn btn-secondary" style="width: 250px;" mat-button matStepperPrevious>Back</button>
<button class="btn btn-success" style="width: 250px;" mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="fourthFormGroup" errorMessage="Family details are required.">
<form [formGroup]="fourthFormGroup" (ngSubmit)="form4()" #formfour="ngForm">
<ng-template matStepLabel>Family Details </ng-template>
<br>
<br>
<div *ngIf="fourthFormGroup.get('rows')">
<div class="row " *ngFor="let row of fourthFormGroup.get('rows')?.controls;let index = index;">
<div class="col-sm" style=" font-family: 'IBM Plex Sans'">
<input type="text" [formControl]="row.get('name')" name="" class="form-control" placeholder="Name Type Here ...">
</div>
<div class="col-sm" style=" font-family: 'IBM Plex Sans'">
<input type="text" [formControl]="row.get('age')" name="" class="form-control" placeholder="Age Type Here ...">
</div>
<div class="col-sm" style=" font-family: 'IBM Plex Sans'">
<input type="text" [formControl]="row.get('relation')" name="" class="form-control" placeholder="No.Of Days To Complete Type Here ...">
</div>
<div class="col-" style=" font-family: 'IBM Plex Sans'">
<input type="submit" name="" value="+" (click)="onAddRow()" class="pink_button_square" style="float: right; width: 50px;" [disabled]="this.message>=100">
</div>
<div class="col-" style=" font-family: 'IBM Plex Sans'">
<input type="submit" name="" value="-" (click)="onRemoveRow(index)" class="pink_button_square" style="float: right; width: 50px;" [disabled]="this.rows.length==1">
</div>
</div>
</div>
<br>
<div style="text-align: right;">
<button class="btn btn-secondary" style="width: 250px;" mat-button matStepperPrevious>Back</button>
<button class="btn btn-success" style="width: 250px;" mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
<p>You are now done.</p>
<div >
<button class="btn btn-secondary" style="width: 250px;" mat-button matStepperPrevious>Back</button>
<button class="btn btn-danger" style="width: 250px;" mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>
пример стекаблита https://stackblitz.com/edit/angular-rcotij