Hello im using angular 13 , building reactive forms with steps each step represents a form to fill by user with the same submit logic for each form , on last step i want all the data stored in each variable(that containing relative step data) and merge it into one big object to send to backend in order to create user / edit, any suggestion how should i do that? .. Code down below
ngOnInit(): void {
this.options2 = {
theme: 'classic',
width: "300"
}
this.landingService.getAllSapaksList() // observable send api request set array data and remove duplicated values
.subscribe((res:any) => {
this.biz_listAPI = res.data;
this.biz_listAPI = [...new Set(this.biz_listAPI)];
});
const elements = document.getElementsByClassName('footer-wrap');
while (elements.length > 0){
elements[0].parentNode.removeChild(elements[0]);
}
const token = this._is.get_index_id();
this.userPhone = Object.values(token)[0];
this.landingService.checkIfDataExist(this.userPhone)
.subscribe(data => {
console.log(data);
if (data.exists) {
this.router.navigate(['index']);
}
}, err => console.log(err))
this.createIndexFormStep0 = new FormGroup({
logo: new FormControl('' , [Validators.required]),
cover: new FormControl('' , [Validators.required]),
title: new FormControl('' , [Validators.required]),
ownerName: new FormControl('' , [Validators.required]),
ownerImage: new FormControl('' , [Validators.required]),
description: new FormControl('' , [Validators.required]),
});
this.createIndexFormStep1 = new FormGroup({
mini_title: new FormControl('', [Validators.required]),
free_description: new FormControl('', [Validators.required]),
gallery_photos: new FormControl('', [Validators.required])
});
this.createIndexFormStep2 = new FormGroup({
phone: new FormControl('', [Validators.required ,Validators.pattern(this._sds.onlyNumberRegEx)]),
fax: new FormControl('', [Validators.required, Validators.pattern(this._sds.onlyNumberRegEx)]),
email: new FormControl('', [Validators.required, Validators.pattern(this._sds.emailRegEx)]),
youtube: new FormControl(''),
facebook: new FormControl(''),
instagram: new FormControl(''),
});
this.createIndexFormStep3 = new FormGroup({
biz_photo: new FormControl('', [Validators.required]),
biz_name: new FormControl([], [Validators.required]),
biz_description: new FormControl('', [Validators.required]),
discount: new FormControl('', [Validators.required, Validators.pattern(this._sds.onlyNumberRegEx)])
});
}
One possible way to deal with these kinds of tasks is to consolidate all of the FormGroups into one FormGroup, then iterate over its' keys on submit.
Step 1: Add form: FormGroup to your component
Step 2: Instead of having each group on its' own, create them (preferebly, with FormBuilder) within the main group, i.e.:
this.form = this.formBuilder.group({
createIndexFormStep0: this.formBuilder.group({
logo: this.formBuilder.control(null, [Validators.required]),
/*...*/,
});
createIndexFormStep1: /*...*/,
createIndexFormStep2: /*...*/,
createIndexFormStep3: /*...*/,
});
Step 3: Update the template correspondingly
Step 4: Use Object.keys to build the request object:
let request = {};
Object.keys(this.form.controls).forEach(groupKey => {
const group = (this.form.get(groupKey) as FormGroup);
Object.keys(group.controls).forEach(controlKey => {
request[controlKey] = this.form.get([groupKey, controlKey]).value;
});
});