修补程序值不适用于嵌套输入响应式表格Angular 5

Question

我正在使用Angular 5和反应式表单，mi表单是使用后端提供的JSON动态创建的，有一些嵌套在3个级别的特殊输入，它与单选按钮配合使用非常好，但是当输入是嵌套复选框的组，补丁值不会更改复选框的值，这是mi结构的示例

this.cvForm = this._fb.group({
  name: ['', [Validators.required]],
  lastname: ['', [Validators.required]],
  nested: this._fb.group({
    level1: this._fb.group({
       level2: this._fb.group({
          level3: this._fb.group({
             checkbox: [false, Validators.required]
         })
       })
     }),
   }),
 });
}

 this.cvForm 
    .get([
      'nested',
      this.nested,
      'level1',
      this.level1,
      'level2',
      this.level2,
      'level3',
      this.level3,
      'components',
      checkbox
    ]).patchValue({ checked: setValue });

编辑：

我一直在用你们提供的示例进行大量测试，感谢您的帮助。但是我看到补丁值并没有保存o第一次单击时更改了值，当视图更改后，一旦单击复选框，但表单中的值仍然为false，第二次单击复选框，则在表单中将值设置为true ，但视图已更改，因此基本上，补丁值和设置值将设置该值，直到在表单中第二次单击为止。我不知道为什么会这样。

Answer 1

由于您只关心设置复选框的值，因此请考虑使用patchValue。

在嵌套{{的情况下，容易出错]而不是通过在FormControl上调用get方法或执行您所做的操作来获得准确的FormGroup 1}} s。

一种简单的方法是创建一个与表单结构匹配的Object值，然后设置要设置的值。

在这里，尝试一下：

FormGroup

---

这是您推荐的Working Sample StackBlitz。

Answer 2

您只需要传递字符串数组，该字符串数组将为您提供所需的max(-a+b) = -a+b。

FormControl

这应该为您工作。您不需要将对象传递给patchValue，因为这是单个formControl。如果要在单个this.cvForm .get([ 'nested', 'level1', 'level2', 'level3', 'checkbox' ]).patchValue(setValue) 中修补多个表单控件的值，则需要传递对象。

Answer 3

经过数小时的研究和测试，我发现角度的反应形式不支持object.property语法来设置深度级别值的值，而是这样做了：

this.cvForm.controls['nested'].controls['level1'].controls['level2'].controls['level3'].controls['checkbox'].value['checked'] = newValue;

这解决了我的问题，谢谢大家的帮助。

Answer 4

如果您正在寻找更新复选框值的方法，请尝试这种方式（对于以后的类似搜索很有用）

我的表单结构

更改复选框的值

this.form.controls.completed['controls'].completed.value = MyBooleanValueHere;

Answer 5

看看https://stackblitz.com/edit/angular-hqjny3对我有用吗

where