Angular 初始FormGroup失败后，将值设置为null

我有一个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"}
    })
});

如果不为null，则将按照如下方式构建：

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

？

此：

数据：This.formBuilder.group（{x:0，y:1}），

正在定义另一个FormGroup。“设为空”是什么意思？是否要将

x

和

y

设置为空？删除表单组？我不确定“设置为null”在您正在创建的FormGroup上下文中的含义

假设您的意思是将FormGroup中FormControls的值设置为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');

数据

是一个FormControl，其值默认为null

在此代码中：

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

是一个包含两个表单控件的表单组：

x

的默认值为0和

y

的默认值为1。

此：

data:This.formBuilder.group（{x:0，y:1}），

正在定义另一个表单组。“设为空”是什么意思？是否要将

x

和

y

设置为空？删除表单组？我不确定“设置为null”在您正在创建的FormGroup上下文中的含义

假设您的意思是将FormGroup中FormControls的值设置为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');

数据

是一个FormControl，其值默认为null

在此代码中：

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

是一个包含两个表单控件的表单组：

x

的默认值为0和

y

的默认值为1。

是的，感谢您的澄清。我的意思是希望数据的FormControl的值为null。关键是首先按照您的建议使用

removeControl

。紧接着，我添加了

（this.dataForm2.get（'testGroup'））.addControl（'data'，newformcontrol（null））。这会将
数据作为值设置为null的FormControl添加回。谢谢是的，谢谢你的澄清。我的意思是希望数据的FormControl的值为null。关键是首先按照您的建议使用
removeControl
。紧接着，我添加了
（this.dataForm2.get（'testGroup'））.addControl（'data'，newformcontrol（null））。这会将
数据作为值设置为null的FormControl添加回。谢谢