I've implemented Reactive Forms on my website using FormBuilder.
There are two fields in the form with FormControls, and also an array of user-created fields stored in a FormArray.
The issue arises when sending data to the server - instead of sending the array as is, the FormArray sends a string with items listed out separated by commas.
How can I ensure that the data sent to the server retains its array format?
Below are the methods defined in my class:
formGroup = this.fb.group({
link: [null, [
Validators.required,
Validators.pattern(/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/)
]],
image: [null, Validators.required],
features: this.fb.array([this.fb.control('', Validators.required)])
});
beforeSubmit(): FormData {
const formData = new FormData();
formData.append('link', this.link.value);
formData.append('image', this.image.value);
formData.append('features', this.features.value);
return formData;
}
submit() {
console.log('submit');
const formData = this.beforeSubmit() as FormData;
this.ss.postSite(formData).subscribe(
response => {
console.log(response);
}
);
}
As for the service:
postSite(input: FormData) {
console.log('posting');
return this.http.post<Site>(this.API_URL, input, this.HEADERS).pipe(
catchError(this.handleError)
);
}