Trying to simultaneously save 3 forms of an angular stepper, where the products (secondFormGroup) and values(thirdFormGroup) may contain multiple rows.
The API model is structured as follows:
{
"product": [
{
"description": "string",
"id": 0,
"name": "string",
"priority": 0,
"store": {
"id": 0,
"name": "string",
"type": "PROPERTIES",
"version": 0
},
"values": [
{
"id": 0,
"value": "string"
}
]
}
],
"store": {
"id": 0,
"name": "string",
"type": "PROPERTIES",
"version": 0
}
}
Below is a snippet of my code:
@Input() firstFormGroup!: FormGroup;
@Input() secondFormGroup!: FormGroup;
@Input() thirdFormGroup!: FormGroup;
@Input() products!: IProduct[];
@Input() values!: IValue[];
constructor(private _formBuilder: FormBuilder) {
this.firstFormGroup = this._formBuilder.group({
name: ['', Validators.required],
type: ['', Validators.required],
});
this.secondFormGroup = this._formBuilder.group({
name: ['', Validators.required],
description: ['', Validators.required],
priority: ['', Validators.required],
});
this.thirdFormGroup = this._formBuilder.group({
value: [null, [Validators.required]],
});
}
This is my service method:
createStore(storeInfo: IStore): Observable<EntityResponseType> {
return this.http.post<IStore>(this.CSstoreUrl, storeInfo, { observe: 'response' });
}
If anyone could assist with resolving a persistent 400 error, it would be greatly appreciated.
Here is a snapshot from the network tab that might provide insights