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

Question

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

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

如果不为空，将构建为：

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 来演示这个问题。错误是：

can't convert null to object

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

Answer 1

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

假设您要将 FormGroup 中的 FormControls 的 value 设置为空值，那么这可行：

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。

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

Angular 7 reactive form patchValue to null after an initial FormGroup fails

angular

angular-reactive-forms

formgroups