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

尝试使用theese代码

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

更新

使用FormGroup方法更新Angular get的嵌套字段看起来更简洁，像这样：

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

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

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

Answer 3

以下是我解决问题的方法：

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

谢谢

Answer 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");

Answer 5

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

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

这样的语法对我来说似乎更清晰。然而，一个相当简单的方法是首先简单地输出form.controls。通过这种方式，您可以在控制台中看到您的表单包含的内容，并且基本上只是观察其结构。

Answer 6

定义一个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。

Answer 7

嵌套表格补丁值，您需要在对象之后使用数组，如下所示：

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

patch使用angular2在嵌套表单控件中的值

7 个答案:

更新