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

我在您的摘要中有3点：

错误提示您没有将Form Fields与Form Control关联。
此外，我想您还缺少与html中的FormName的关联。也许您还没有在这里添加该行。
此外，您无需使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>

角反应性表单元素集包含数组数据的数组字段

1 个答案: