补丁值不适用于嵌套输入反应形式 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

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

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

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

Answer 2

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

而不是通过调用FormGroup上的get方法或通过执行您所做的操作来获取确切的FormControl ，在嵌套FormGroup的情况下可能容易出错。

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

在这里，试试这个：

setValue: boolean = true;
...
this.cvForm.patchValue({
  nested: {
    level1: {
      level2: {
        chekbox: setValue
      }
    }
  }
});

---

这是供您参考的工作示例 StackBlitz 。

Answer 3

您只需要传递字符串数组，它将为您提供您正在寻找的FormControl 。

this.cvForm 
.get([
  'nested',
  'level1',
  'level2',
  'level3',
  'checkbox'
]).patchValue(setValue) 

这应该适合你。 您不需要将对象传递给 patchValue，因为这是单个 formControl。 如果您要为单个FormGroup多个表单控件修补值，则需要传递 object。

Answer 4

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

我的表单结构

更改复选框值

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

Answer 5

看看这个https://stackblitz.com/edit/angular-hqjny3它对我有用

this.cvForm.patchValue({
  nested: {
    level1: {
      level2: {
        level3: {
          chekbox: true|false
        }
      }
    }
  }
});