初始FormGroup失败后，Angular 7反应形式patchValue为null

Question

我有一个 FormGroup，其中初始数据可能为空，也可能不为空。如果它为 null，FormGroup 将像这样构建：

this.dataForm = this.formBuilder.group({
    prop1: true,
    testGroup: this.formBuilder.group({
      data: null,
      check: { a: "a", b: "b"}
    })
});

如果它不为null，它将像这样构建：

this.dataForm = this.formBuilder.group({
    prop1: true,
    testGroup: this.formBuilder.group({
      data: this.formBuilder.group({ x: 0, y: 1}),
      check: { a: "a", b: "b"}
    })
});

如果我尝试将 data 的值设置为 null（如果它最初不是 null），就会出现问题。

我已经设置了一个 stackblitz here 来演示这个问题。错误是：

无法将 null 转换为对象

基本上，问题是：一旦将属性设置为FormGroup，如何将其设置为null？

Answer 1

这：data: this.formBuilder.group({ x: 0, y: 1}), 正在定义另一个 FormGroup。 “将其设置为空”是什么意思？您想将x 和y 设置为null？删除 FormGroup？我不确定在您正在创建的 FormGroup 的上下文中“设置为 null”是什么意思。

假设您的意思是将 FormGroup 中的 FormControls 的 value 设置为 null 值，那么这是可行的：

changeToNull2() {
  console.log(this.dataForm2);
  console.log(this.dataForm2.get('testGroup').value);
  this.dataForm2.get('testGroup.data').patchValue({
    x: null,
    y: null
  });
}

如果你想删除data定义的FormGroup，你可以像这样使用removeControl()：

  (<FormGroup>this.dataForm2.get('testGroup')).removeControl('data');

更新的 stackblitz 显示两者：https://stackblitz.com/edit/angular-7-reactive-form-validation-aeshez

更新

只是为了澄清，在这段代码中：

this.dataForm = this.formBuilder.group({
    prop1: true,
    testGroup: this.formBuilder.group({
      data: null,
      check: { a: "a", b: "b"}
    })
});

data 是一个 FormControl，其值默认为 null。

在这段代码中：

this.dataForm = this.formBuilder.group({
    prop1: true,
    testGroup: this.formBuilder.group({
      data: this.formBuilder.group({ x: 0, y: 1}),
      check: { a: "a", b: "b"}
    })
});

data 是一个带有两个 FormControl 的 FormGroup：x，默认值为 0，y，默认值为 1。