Question

我目前正在使用角度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处的空输入。这可以在constructor with

中删除

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中的错误 - 由：无法读取属性＆＃39; get＆＃39;未定义的

Answer 1

我遇到了类似的问题，我通过这样做解决了这个问题（我正在向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);
});

我在{strong> 初始化“secretLairs”FormArray

部分下找到了我需要的信息Angular Reactive Forms

我认为我和你正在做的事情正在考虑

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

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

在索引0

1 个答案: