Angular 7 реактивная форма patchValue обнуляется после сбоя начальной группы FormGroup

У меня есть 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 равным нулю, если оно изначально не было нулевым.

Я настроил stackblitz здесь, чтобы продемонстрировать проблему. Ошибка:

не могу преобразовать null в объект

По сути, вопрос таков: как только свойство установлено как FormGroup, как установить его на null?


angular angular-reactive-forms formgroups
person Tim    schedule 22.01.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Это: data: this.formBuilder.group({ x: 0, y: 1}), определяет другую группу форм. Что значит «установить его на ноль»? Вы хотите установить x и y равными нулю? Удалить группу форм? Я не уверен, что означает «установить значение null» в контексте создаваемой вами FormGroup.

Предполагая, что вы хотите установить для value элементов управления FormControls в FormGroup нулевые значения, тогда это работает:

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

Если вы хотите удалить FormGroup, определенную 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"}
    })
});

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 — это FormGroup с двумя элементами FormControl: x со значением по умолчанию 0 и y со значением по умолчанию 1.

person DeborahK    schedule 23.01.2019
comment
Да, спасибо за разъяснение. Я имел в виду, что хочу, чтобы значение FormControl для данных было нулевым. Ключ был в том, чтобы сначала использовать removeControl, как вы предложили. Сразу после этого я добавил (<FormGroup>this.dataForm2.get('testGroup')).addControl('data', new FormControl(null));. Это добавляет обратно data в качестве FormControl со значением, равным нулю. Спасибо! - person Tim; 24.01.2019