Поле массива угловых реактивных элементов формы с массивом данных

Question

Я использую Angular 6 и Reactive form для создания формы.

В функции ngOnInit() я инициализировал группу форм, такую ​​как

this.landingPageForm = this.formBuilder.group({
  title: new FormControl('', [
    Validators.required
  ]),
  images: this.formBuilder.array([])
});

В этой группе форм я хочу, чтобы images было скрытым полем ввода, поскольку значения будут вставлены из компонента. и title будет отображаться пользователю.

У меня есть переменная массива, которая содержит URL для изображений.

images: Array = [];

console.log(images);

Утешительный images дает данные в следующем формате

[
    "https://example.com/image1.jpg", 
    "https://example.com/image2.jpg", 
    "https://example.com/image3.jpg"
]

для установки значения images в поле ввода images. Я пытаюсь

this.landingPageForm.setValue({
    title: this.product.info.title,
    images: this.images || [],
});

Но выдает ошибку как

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).

Я пытался вставить скрытое поле ввода для таких изображений, как

<input type="hidden" formControlName="images">
and
<input type="hidden" formControlName="images[]">

Но, тем не менее, такая же ошибка есть.

Как установить значения переменной images в поле ввода массива?

Answer 1

У меня есть три точки на вашем фрагменте:

• Вы не связываете Form Fields с Form Control, как говорится в ошибке.
• Кроме того, я полагаю, вам не хватает ассоциации с FormName в вашем html. Или, может быть, вы не добавили эту строку здесь.
• Также вам не нужно вызывать FormGroup в NgOnInit(). Вы можете просто присвоить значение во время NgOnInit().

Используйте приведенный ниже фрагмент для вашей машинописи:

export class FormFieldOverviewExample implements OnInit{
   constructor(private formBuilder : FormBuilder){}
   images: any[];
   product:any;

   //Assign FormControl to the fields
   landingPageForm = new FormGroup({
       title: new FormControl(''),
       images: new FormControl(''),
   });

   ngOnInit(){
       images: any[] = [
           "https://example.com/image1.jpg", 
           "https://example.com/image2.jpg", 
           "https://example.com/image3.jpg"
       ];
       product = {"info":{"title" : "Product Title"}};
       this.landingPageForm.setValue({
       title: this.product.info.title,
       images: this.images || [],
       });
   }

Фрагмент HTML:

<form [formGroup]="landingPageForm">
<input formControlName="images">
</form>