Angular 6: Создание формы из модельного класса

Question

Я работаю над приложением Angular 6, которое будет подключаться к бэкэнду .Net Web Api для манипулирования данными, и у меня будет несколько классов (моделей) Angular, которые будут представлять каждую таблицу базы данных, и я бы хотелбыть в состоянии создать форму, используя классы этой модели.

Давайте посмотрим на пример кода: вот как я сейчас создаю свою форму в onInit.

createForm() {
    this.vacancyForm = new FormGroup({
      number: new FormControl(),
      requester: new FormControl(),
      date: new FormControl(),
      position: new FormControl(),
      replacement: new FormControl(),
      discharge_date: new FormControl(),
      candidate: new FormControl(),
      contract_type: new FormControl(),
      working_day: new FormControl(),
      annual_salary: new FormControl(),
      business_division: new FormControl(),
      company: new FormControl(),
      workplace: new FormControl(),
      personal_division: new FormControl(),
      department: new FormControl(),
      cost_center: new FormControl(),
      workplace_address: new FormControl()
    });
  }

И она отлично работает,но эта форма вакансии представляет собой одну таблицу в моей базе данных, и я хотел бы иметь класс машинописи Vacancy со всеми этими свойствами и создать экземпляр формы следующим образом:

Class Vacancy (vacancy.ts):

export class Vacancy {

  number: number
  date: Date
  requester: string
  ...
  constructor(  ) { }
}

Форма вакансии класса (vacancy-form.component.ts)

var _vacancy = new Vacancy();
this.vacancyForm = new FormGroup(_vacancy); // => let's say, the definition of the form is taken from the class fields.

Я не знаю, имеет ли это смысл или этокак Angular работает (или может работать), но представьте, что некоторые поля (или поля) изменяются в вашей таблице, тогда вам придется изменить не только класс модели, но и определение формы, и я бы хотел, чтобы они были связаны (связаны илиэто шоуэто будет называться) поэтому вы изменяете только модель, а форма принимает эту модель в качестве входного определения.

Возможно ли это?

Я бы добавил, что я не ищу способ переборасвойства класса, а затем с помощью цикла создайте определение формы, не совсем это (во всяком случае, я бы посчитал это, если оно того стоит), но встроенный способ связать определение формы со свойствами класса.

Большое спасибо.

Answer 1

Прежде всего, включает в себя все ваши свойства в массиве, например так:

vacancyProperties: string[] = {
    'number',
    'requester',
    'date',
    ...
    'workplace_address'
}

После этого вы можете создать свою группу из итерации в массиве vacancyProperty.

const group = {}
vacancyProperties.forEach(property => group[property] = new FormControl());
this.vacancyGroup = new FormGroup(group);

Вы должны заметить, что group[property] создает поле property в вашем объекте.Например, если property = 'date', это создаст

{
    ....
    date: new FormControl()
    ...
}