Angular 6: Creating a form from a model class

I'm working on an Angular 6 app that will connect to .Net Web Api backend for data manipulation and I'll have some Angular model classes (model) that will represent each table of the database and I'd like to be able to create a form using that model classes.

Let's see some code example: this is how I'm currently creating my form in 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()
    });
  }

And it works fine, but this vacancy form represents one table in my database and what I'd like to do is to have a typescript class Vacancy with all these properties and to instantiate the form in a way similar to this:

Class Vacancy (vacancy.ts):

export class Vacancy {

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

Class vacancy-form (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.

I don't know if that makes sense or if that is the way Angular works (or can work) but imagine some field (or fields) change in your table then you'll have to modify not only the model class but also the form definition and I'd like them to be binded (linked or however it should be called) so you only modify model and form takes that model as input definition.

Is that possible?

I'd add that I'm not looking for a way to iterate over a class properties and then through a loop create the form definition, not exactly that (anyway I would consider it if it worth) but a built-in way to link a form definition to a class properties.

Many thanks.

Solution

First of all, inclues all your properties in an array like this :

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

After, you can create your from group iterating on vacancyProperty array.

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

You have to note that group[property] create a field property in your object. For exemple, if property = 'date', it will create

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