补丁值不适用于嵌套输入反应形式Angular 5答案

【问题标题】：Patch value not working with nested inputs Reactive forms Angular 5补丁值不适用于嵌套输入反应形式Angular 5
【发布时间】：2018-12-03 15:09:53
【问题描述】：

我正在使用 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 ，但是视图发生了变化，基本上补丁值和设置值正在设置值，直到第二次单击表单。我不知道为什么会这样。

【问题讨论】：

你是如何使用补丁值的？
您尝试设置值的数据是什么？
我编辑代码，@SachinGupta 并添加补丁行，这就是我们如何使用补丁值。
@SiddAjmera 我正在尝试使用布尔值设置值。
@GeekDev，我已经更新了我的答案。请检查这是否适合您。

标签： angular angular5

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

而不是通过在FormGroup 上调用get 方法或通过执行您已完成的操作来获取确切的FormControl，这在嵌套FormGroups 的情况下很容易出错。

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

来，试试看：

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

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：

【解决方案4】：

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

我的表单结构

更改复选框值

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

您正在使用该对象修补多个级别的FormGroup。 OP 只想修补单个控件的值。
是的，我明白了，问题得到了更新。但我对以下几行几乎做了同样的事情：get checkboxControl() {return this.cvForm.controls['nested'].controls['level1'].controls['level2'].controls['level3'].controls['checkbox'];} 但当然通过 get 它更聪明。
抱歉，没有看到您的 stackblitz 代码。只有这里给出的答案