I am currently using Angular 6 along with Reactive form to create a form.
Within the ngOnInit() function, I have set up a form group in the following manner:
this.landingPageForm = this.formBuilder.group({
title: new FormControl('', [
Validators.required
]),
images: this.formBuilder.array([])
});
For this form group, my intention is to make the images field a hidden input since the values will be populated by the component, while displaying the title to the user.
I have an array variable that stores URLs of the images.
images: Array = [];
console.log(images);
When I console log the images, I get data in the following format:
[
"https://example.com/image1.jpg",
"https://example.com/image2.jpg",
"https://example.com/image3.jpg"
]
In order to assign the value of images to the images input field, I am attempting:
this.landingPageForm.setValue({
title: this.product.info.title,
images: this.images || [],
});
However, this is resulting in the following error message:
There are no form controls registered with this array yet. If you're using ngModel,
you may want to check next tick (e.g. use setTimeout).
I have also tried adding a hidden input field for images like:
<input type="hidden" formControlName="images">
and
<input type="hidden" formControlName="images[]">
Still, the same error persists.
How can I successfully assign the values of the images variable to the array input field?