Question

我有一个带有嵌套形式组的角反应形式

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'
    }
  });

但是，如果address属性为null：

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

我收到错误消息：无法将未定义或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

您说您从服务器获取了一个无法控制的对象，因此您不知道地址是否有值。您可以使用||（或）运算符。

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

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

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

STACKBLITZ

Angular反应形式中的Null值嵌套FormGroup

3 个答案: