Question

我的表单组代码为

this.myForm = this._fb.group({            
            branch_name: ['', [Validators.required]],
            branch_timing: this._fb.array([
                this.initBranchTiming(),
            ])                                
        });

initBranchTiming() {       
        return this._fb.group({
            day: ['', []],
            open_from: ['00:00:00', []],
            open_till: ['00:00:00', []]           
        });
  }

branch_name由此代码更新

(<FormControl>this.myForm.controls['branch_name']).updateValue(this.branch_detail.branch_name);

现在我必须更新表单数组的'day'字段。如何更新表格数组branch_timing的'day'字段？

Answer 1

AFAIK将FormGroup置于FormArray内，剥离其名称的'FormControls'，并使其成为一个列表，就像普通数组一样。

要单独更新FormControls，请使用索引从AbstractControl更新每个FormGroup的值：

let index = 0; // or 1 or 2
(<FormArray>this.myForm.controls['branch_timing']).at(index).patchValue('example');

您也可以致电FormArray或setValue来更新整个patchValue：

(<FormArray>this.myForm.controls['branch_timing']).setValue(['example', 'example1', 'example2']);

setValue需要一个与整个结构或FormArray匹配的数组，而patchValue可以采用数组的超集或子集。（FormArray-class on Angular2's website）

Answer 2

您只需创建一个新的FormControl即可完成此操作：

this.form.setControl('items',  new FormControl(arrayItemsValue));

或者在更新之前删除所有项目：

const items = (<FormArray>this.form.get('items'));
 for (let i = 0; i < items.length; i++) {
     items.removeAt(i);
 }
 this.form.get('items').setValue(arrayItemsValue);

Answer 3

这是经过测试的，适用于Angular 2.0.0-rc.4，@ angular / forms 0.2.0：

(<FormControl>this.myForm.controls.branch_timing.controls[0].controls.day)
  .updateValue('new value');

在发布版本中，使用@ angular / forms 2.0.0的Angular 2.0.0，语法已经简化：

this.myForm.value.branch_name = this.branch_detail.branch_name;

和

this.myForm.value.branch_timing[0].day = 'New Value';

Answer 4

试试吧，希望它适合你：

＆＃13;

 this.myForm.controls.splice(0);

＆＃13;

如何更新FormArray的控件

4 个答案: