Angular 反应式表单嵌套 FormGroup 中的空值

Question

我有一个 angular 带有嵌套表单组的反应式表单

this.form = new FormGroup({
  name: new FormControl(),
  address: new FormGroup({
    line1: new FormControl(),
    line2: new FormControl()
  })
});

如果我使用包含嵌套字段的对象调用 form.patchValue，一切都会按预期正常工作：

this.form.patchValue({
    name: 'test',
    address: {
      line1: 'test line 1',
      line2: 'test line 2'
    }
  });

然而，如果地址属性为空：

this.form.patchValue({
    name: 'test',
    address: null
  });

我收到一个错误：无法将 undefined 或 null 转换为对象。

我如何解决这个问题，因为从服务器返回的对象是有效的，我无法控制它。

此处示例：https://stackblitz.com/edit/angular-broncz

谢谢

Answer 1

您可以重置控件：

  setForm2() {
    this.form.controls['address'].reset()
    this.form.patchValue({
        name: 'test'
      });
  }

Answer 2

只需给地址一个空对象。这不会在 Stackblitz 上引发任何错误，只会更新您喜欢的内容。

setForm2() {
    this.form.patchValue({
        name: 'test',
        address: {}
      });
  }

Answer 3

你说你从你的服务器得到了一个你无法控制的对象，所以你不知道 address 是否有值。您可以为此使用 || （或）运算符。

您也可以重置表单以防万一，具体取决于您的使用方式。如果表格在 patchValue 之前不可编辑，则无需重置。

// faking server response
const myObj = { name: 'mytest', address: null };

this.form.reset();
this.form.patchValue({
  name: myObj.name,
  address: myObj.address || {}
});

STACKBLITZ

Angular 反应式表单嵌套 FormGroup 中的空值

Null value in Angular Reactive form nested FormGroup

angular

angular-reactive-forms

angular-forms