Нулевое значение в Angular Reactive форме, вложенной в FormGroup

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

Я получаю сообщение об ошибке: Невозможно преобразовать неопределенное или нулевое значение в объект.

Как обойти эту проблему, когда объект возвращается изсервер действителен, и я не могу его контролировать.

Пример здесь: https://stackblitz.com/edit/angular-broncz

Спасибо

Answer 1

Вы можете сбросить управление:

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

Answer 2

Вы говорите, что получаете от своего сервера объект, которым вы не можете управлять, поэтому вы не знаете, будет ли адрес иметь значение или нет. Для этого вы можете использовать оператор || (или).

Вы также можете сбросить форму на всякий случай, в зависимости от того, как вы ее используете. Если форма недоступна для редактирования до patchValue, сбрасывать ее не нужно.

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

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

STACKBLITZ

Answer 3

Просто дайте адрес пустого объекта. Это не вызывает ошибки на Stackblitz и только обновляет то, что вам нравится.

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