Angular reactive forms cast the form.values to the model

Question

I have a model represented by interface.

export interface MyModel {
  id: number;
  enabled: boolean;
  name: string;
  city: string;
  country: string;
}

When I am posting the reactive form all the values in form.value are string type. I tried to cast that by using <MyModel> syntax but didn't work.

submitForm(form: FormGroup, event: Event) {
   this.func(<MyModel>form.value);
}

Any ideas how woul you handle that?

I have my form setup like that:

setupForm() {
    this.userForm = this.formBuilder.group({
      id: [null, Validators.required],
      enabled: [null, Validators.required],
      name: [null, Validators.required],
      city: [null, Validators.required],
      country: [null, Validators.required]
    });
  }

Answer 1

Something like this should work:

Object.assign(this.movie, this.editForm.value);

It will copy all of the matching properties from the edit form values into the original object.