0

我有一个 FormGroup，其中初始数据可能为空，也可能不为空。如果它为空，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来演示这个问题。错误是：

无法将 null 转换为对象

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

4

1 回答 1

2

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

假设您的意思是将 FormGroup 中的 FormControls的值设置为空值，那么这可以工作：

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

如果您的意思是删除由 定义的 FormGroup data，您可以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。

于 2019-01-23T00:22:32.833 回答