使用angular2在嵌套表单控件中修补值答案

【问题标题】：patch Value in a nested form control using angular2使用angular2在嵌套表单控件中修补值
【发布时间】：2017-11-03 11:28:30
【问题描述】：

我需要在 FormBuiler 的嵌套控件中设置一个值，模型如下：

this.addAccForm = this.fb.group({
      accid: ['', Validators.required],
      status: '',
      cyc: this.fb.array([
        this.initCyc(),
      ])
    })

initCyc() {
      return this.fb.group({
        cycid: ['', Validators.required],
        name: ['', Validators.required],
        description: ['', Validators.required],
        status: ['', Validators.required],
        det: this.fb.group({
            dcycid: ['', Validators.required],
            status: ['', Validators.required]
        })
      })

我需要设置一个值 cycid 和 dcycid 但我坚持下去，我尝试使用以下行，但它没有帮助：

this.addAccForm.patchValue({cyc: { [0]: {cycid: 1234567 }}});

//

this.addAccForm.patchValue({cyc: { [0]: { det : {dcycid: 9876543}}}});

知道应该怎么做吗？

【问题讨论】：

标签： angular2-forms angular2-formbuilder

【解决方案1】：

嵌套形式的patchvalue，你需要像这样在对象之后使用数组：

this.userform.patchvalue({
 name: 'Ajay',
 approvers: [ {id:1} ]
})

【讨论】：

【解决方案2】：

更新

使用get 方法更新Angular FormGroup 的嵌套字段看起来更干净，如下所示：

this.addAccForm.get('cyc.det.dcycid').patchValue(9876543);

如果出于某种原因你喜欢对象语法：

this.addAccForm.get('cyc.det').patchValue({ dcycid: 9876543 });

【讨论】：

【解决方案3】：

定义一个FormGroup 来保存一个表单。
addAccForm: FormGroup

使用FormBuilder 创建一个表单。

this.addAccForm = this.fb.group({
    accid: ['', Validators.required],
    status: '',
    cyc: this.fb.array([])
})

现在创建一个方法来修补表单值。您可以将模型作为参数传递给方法。或者组件类中定义的变量。

// GETER TO RETRIEVE THE CYC FORMARRAY
get cycFormArray(): FormArray {
    return this.addAccForm.get('cyc') as FormArray;
}

patchForm(model: any) {
   this.addAccForm.patchValue({
       accid: [model.accid, Validators.required],
       status: model.status,
   });

   // PASS ARRAY TO PATCH FORM ARRAY
   this.patchCyc(model.cyc);
}

// METHOD TO PATCH FORM ARRAY 
patchCyc(cycArray: any[]) {
    cycArray.forEach(item => {
        this.cycFormArray.push({
            this.fb.group({
               prop1: item.prop1,
               prop2: item.prop2,
               ...
            })
        })
    })
}

patchCyc() 方法将遍历作为参数传递的数组。在每个循环中，一个新的FormGroup 将被推送到cyc FormArray。

【讨论】：

【解决方案4】：

这是为我工作的代码。

我正在使用 Angular 版本 "^6.0.0"

var formArray = this.addAccForm.get("cyc") as FormArray;
formArray.at(0)["controls"]["cycid"].patchValue("Value that you want to pass");

【讨论】：

【解决方案5】：

显然，这是一个较旧的条目，但这就是我处理类似情况的方式

this.addAccForm.controls['cyc']['controls'][index].patchValue({cycid: '100'})

这样的语法对我来说似乎更干净。但是，一种相当简单的方法是首先简单地输出 form.controls。这样你就可以在控制台中看到你的表单由什么组成，并且基本上只是观察它的结构。

【讨论】：

【解决方案6】：

这对我有用：

this.addAccForm.patchValue({'cyc': {cycid: 1234567 }});

【讨论】：

【解决方案7】：

这是我解决问题的方法：

(this.addAccForm.controls['cyc'].at(0)).patchValue({cycid: 12345 });  
//
(this.addAccForm.controls['cyc'].at(0)).controls['det'].at(0).patchValue({dcycid: 9876543});

谢谢

【讨论】：

那是代码对我不起作用，我认为版本不同，我使用的是版本^6.0.0

【解决方案8】：

试试这些代码

this.addAccForm.patchValue({cyc: {cycid: 1234567 }});

this.addAccForm.patchValue({cyc: { det : {dcycid: 9876543}}});

另一种解决方案是：

(< FormGroup >this.addAccForm.controls['cyc']).controls['cycid'].patchValue('1234567');
(< FormGroup >this.addAccForm.controls['cyc']).controls['det'].controls['dcycid'].patchValue('1234567');

【讨论】：

试一试没有成功。