5

我目前正在使用 angular 2 和响应式表单构建更新、添加、删除和编辑表单。我已将控件分组到表单构建器数组中，以将输入控件动态添加到表单数组。这适用于没有任何要初始化的项目的空表单。

export class ItemsPage{

   collectionForm: FormGroup;
   get items(): FormArray { return <FormArray>this.collectionForm.get('items'); }

   constructor(public formBuilder: FormBuilder){

        this.pageDetails = this.navParams.data;

        this.collectionForm = this.formBuilder.group({
           items: this.formBuilder.array([this.buildItem()])
        });
   }

   buildItem(item?: string): FormGroup {
       return this.formBuilder.group({ item: [item || '', Validators.required] });
   }

   ionViewDidLoad() {
       // Builds a form with pre populated items 
       forEach(this.pageDetails, value => {
           this.items.push(this.buildItem(value));
       })
   }
}

问题是视图中的控件列表在index 0何时this.pageDetails包含值列表时包含一个空输入。这可以在constructorwith中删除

this.items.removeAt(0);

然而，这似乎不对。我想也许我可以在它的formBuilder.array

let prebuildItems = forEach(this.pageDetails, value => { // lodash forEach
  this.items.push(this.buildItem(value));
});

this.collectionForm = this.formBuilder.group({
  items: this.formBuilder.array([prebuildItems])
});

但是，当我使用该代码导航到页面时，出现以下错误：

./ItemsPage 类 ItemsPage 中的错误 - 原因是：无法读取未定义的属性“获取”

4

1 回答 1

3

我刚刚遇到了类似的问题，我通过这样做解决了它（我正在向 FormArray 添加标题）。

addHeader(name = '', value = '') {
    // get headers array control from group
    let headers = <FormArray>this.editForm.controls['options'].controls['headers'];

    // create new header control
    let header = this.fb.group({
        name: [name, Validators.required],
        value: [value]
    });

    // set the value on the control
    // header.setValue({ name, value });

    // add the new control to the array
    headers.push(header);
}

然后，当我最初填充表单时，我只是遍历数据并填充标题。

this.data.headers.forEach(h => {
    this.addHeader(h.name, h.value);
});

我在初始化“secretLairs”FormArray部分下的Angular Reactive Forms中找到了我需要的信息

我想我和也许你正在做的就是这样想

this.formBuilder.array([this.buildItem()])

正在为数组设置“模式”，当它实际上添加了一个带有值的控件时。

于 2017-03-29T13:29:14.590 回答