Чтение сразу всех полей в объект класса из FormGroup

Question

Проект на Angular. Имеется форма ввода с набором полей. В документации приводятся примеры как читать каждое поле по отдельности. А можно прочитать сразу все поля и сохранить это в классе (или наверное лучше интерфейсе Fruit). И самое главное будет ли это корректно работать если кол-во полей в интерфейсе Fruit не совпадает с их количеством в форме fruitForm?

fruit!: Fruit;

fruitForm = new FormGroup({
  name: new FormControl(),
  ... тут еще 5 полей
  series: new FormControl('series-01')
});
onFormSubmit(): void {
  console.log('Name:' + this.fruitForm.get('name').value);
  ...
  console.log('Series:' + this.fruitForm.get('series').value);
}

interface / class

export interface Fruit {
  id: number;
  name: string;
  ... тут еще 5 полей
  series: string;
  data: Data;
}

Answer 1

Для того, чтобы получить значение всех полей у FormGroup можно использовать:

метод .getRawValue()

или поле value

Стоит отметить, что оба варианта вернут, в вашем случае, объект с типом any, что не очень соответствует ожиданиям получить объект с типом Fruit. К сожалению, сейчас еще нет типизированных форм в Angular, есть только наработки для следующих версий фреймворка.

В вашем случае, получив объект можно будет его попробовать переписать в ваш объект с типом. То есть примерно так:

const formValue = this.formGroup().getRawValue();

const fruit: Fruit = {
id: formValue.id
name: formValue.name
...
}

Если ваш интерфейс Fruit сопоставим с тем, что возвращает форма, то можно попровать и просто прировнять, иначе придется описывать каждое поле.

P.S. Возможно, не самый элегантный вариант решения проблемы, но вполне рабочий.

БЛОГ НА HUSL

Чтение сразу всех полей в объект класса из FormGroup

Ответы (1 шт):