代码之家 › 专栏 › 技术社区 › Tim

在初始FormGroup失败后,Angular 7 Reactive Form PatchValue变为空

formgroups angular-reactive-forms angular

0

Tim · 技术社区 · 6 年前

我有一个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 如果最初不是空值,则返回空值。

我已经安排了一次突击行动 here 演示问题。错误是:

无法将空值转换为对象

基本上,问题是:一旦一个属性被设置为 FormGroup ,如何设置 null ?

1 回复 | 直到 6 年前

1

2

DeborahK 6 年前

这是: data: this.formBuilder.group({ x: 0, y: 1}), 正在定义另一个窗体组。“设为空”是什么意思?你想设置 x 和 y 为零?删除窗体组?我不确定在您正在创建的表单组上下文中,“设置为空”是什么意思。

假设你打算设置价值将FormGroup中的FormControls设置为空值,则此操作有效:

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

如果要删除由 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"}
    })
});

数据 是值默认为空的FormControl。

在本代码中:

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

数据 是包含两个FormControls的FormGroup: X 默认值为0和 Y 默认值为1。