在索引 0 处初始化没有空输入的表单数组

Question

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

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));
       })
   }
}

问题是当 this.pageDetails 有一个值列表时，视图中的控件列表在 index 0 处包含一个空输入。这可以在 constructor 和

中删除

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])
});

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

Error in ./ItemsPage class ItemsPage - caused by: Cannot read property 'get' of undefined

Answer 1

我刚刚遇到了类似的问题，我通过这样做解决了它（我将 headers 添加到 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);
}

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

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

我在初始化"secretLairs" FormArray[部分下Angular Reactive Forms找到了我需要的信息=14=]

我想我和你可能正在做的是认为

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

正在为数组设置"schema"，而实际上它添加了一个带有值的控件。

在索引 0 处初始化没有空输入的表单数组

Initialize form array without empty input at index 0

angular

angular-reactive-forms