Reactive Forms correctly convert Form Value to Model Object

Question

While creating a Model Driven Template Reactive forms, when I create model object from Form Value. Then model object is loosing its TYPE.

For a Simple Example:

Answer 1

Let's say your model is like this:

export class Content {
    ID: number;
    Title: string;
    Summary: string;
}

Your component will look like this:

export class ContentComponent implements OnInit {


  content: Content;
  contentForm: FormGroup;

  ngOnInit() {


    this.contentForm = this.formBuilder.group({
      Title: ['', Validators.required],
      Summary: ['', Validators.required]
    });.....

When the save button is called, you can merge the form builder object and the dto you have:

onContentFormSubmit() {

// stop here if form is invalid
if (this.contentForm.invalid) {
  return;
}

this.content = Object.assign(this.content, this.contentForm.value);

}

this.content will have the predefined values you have from onInit and the values from the from group.

Answer 2

I use spread operator:

this.newBook = {...this.newBook,...this.bookFormGroup.value}