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

Question

我需要在 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}}}});

知道应该怎么做吗？

Answer 1

尝试使用这些代码

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

Answer 2

这是我解决问题的方法：

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

谢谢

Answer 3

这对我有用：

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

Answer 4

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

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

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

Answer 5

这是为我工作的代码。

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

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

Answer 6

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

使用 FormBuilder 创建表单。

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

现在创建一个方法来修补表单值。您可以将模型作为参数传递给方法。或者在组件 class.

中定义的变量

// 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。

Answer 7

更新

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

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

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

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

Answer 8

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

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

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

patch Value in a nested form control using angular2

angular2-forms

angular2-formbuilder

更新