Question

我有一个FormGroup，其中初始数据可以为null，也可以不为null。如果为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），则会出现问题。

我已经设置了堆栈闪电here来演示该问题。错误是：

无法将null转换为对象

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

Answer 1

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

假设您要在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');

更新的堆叠闪电战同时显示了两个：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。

初始FormGroup失败后，Angular 7反应性表单patchValue为null

1 个答案: