Сохранение 3 форм с одной отправкой Angular 10
Я пытаюсь сохранить 3 формы углового степпера одновременно, зная, что продукты (secondFormGroup) и значение ( ThirdFormGroup) могут содержать несколько строк
Модель API выглядит так:
{
"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
}
}
Это мой код
@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]],
});
}
Это мой сервис:
createStore(storeInfo: IStore): Observable<EntityResponseType> {
return this.http.post<IStore>(this.CSstoreUrl, storeInfo, { observe: 'response' });
}
Если кто-нибудь может помочь, пожалуйста
У меня ошибка 400
Вот что показывает вкладка сети
Ответы 1
Почему бы не сгруппировать все ваши степперные формы в одну вложенную группу/массив с помощью formArray примерно так (пожалуйста, проверьте ссылки на документацию для полного правильного синтаксиса):
this.fullForm = this._formBuilder.group({ // will have structure of IStore
store : this.firstFormGroup,
product : this._formBuilder.array([ // matches the array of forms
this._formBuilder.group({
name: ['', Validators.required],
description: ['', Validators.required],
priority: ['', Validators.required],
values: this._formBuilder.array([ // array in the array of forms
this._formBuilder.control('', Validators.required)
])
})
])
})
Таким образом, форма выведет объект значения, соответствующий ожидаемой структуре API.
this.fullForm.value // has structure of the forms (minus the disabled ones)
this.fullForm.valueChanges.subscribe(change => console.info(change)) // shows every value change
Чтобы отладить больше, вы также можете добавить это в свой шаблон:
<pre>{{fullForm.value | json}}</pre>
В этом случае вам нужно проверить, что вызывает 400, либо через вкладку сети в инструменте разработки браузера (проверьте также, что было отправлено), либо через трассировку стека бэкэнда.
Я сохраняю форму следующим образом: const result = Object.assign({}, this.fullForm.value); this.storeService.createStore (результат); через вкладку сети я получил, что все поле остается пустым, я отредактировал свой пост, чтобы вы могли видеть, что показывает вкладка
Спасибо за ответ, но моя проблема в том, как опубликовать его и сохранить в моей базе данных .. я получил ошибку 400 (неверный запрос)