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]
    });
  }

score 7 · Answer 1 · answered Mar 19 '18 at 23:49

7

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.

answered Mar 19 '18 at 23:49

DeborahK

57,520
12
104
129

how would you do same but without introducing a new `object(this.movie)`? – Sergino Mar 20 '18 at 00:51
So you don't have any original data that you are using to populate the form? – DeborahK Mar 20 '18 at 01:19
the data coming from the form so there is no need to introduce a new variable to store the thing – Sergino Mar 20 '18 at 23:58

Angular reactive forms cast the form.values to the model

1 Answers1