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:

Model Class Book:

export class Book {   public name: string;   public isbn: string; } 

Component:

@Component({   selector: 'app-book',   templateUrl: './book.component.html',   styleUrls: ['./book.component.css'] }) export class BookComponent implements OnInit {    bookFormGroup: FormGroup;   private newBook: Book = new Book();    constructor(private fb: FormBuilder) {     this.bookFormGroup = this.fb.group({       name: new FormControl(''),       isbn: new FormControl('')     });   }    ngOnInit() {   }    addBook() {     console.log('submit');     this.newBook = <Book> this.bookFormGroup.value;     console.log(this.newBook instanceof Book);     console.log(this.newBook);   }  } 

HTML:

<form [formGroup]="bookFormGroup" (ngSubmit)="addBook()">     <input type="text" formControlName="name" >     <input type="text" formControlName="isbn" >      <input type="submit" value="Submit"> </form> 

In the above example, after filling newBook instance its converted to normal Object

i.e, After this.newBook = <Book> this.bookFormGroup.value;

this.newBook instanceof Book is becoming FALSE

How do I prevent this? Or is there any better way to achieve this?

Note: I tried with JSON.parse() but it still same.

Answer 1

This constructor will work with any type and will assign any matching filed.

export class Book {   public constructor(init?: Partial<Book>) {         Object.assign(this, init);     } } 

So you will be able to do this:

this.newBook = new Book(this.bookFormGroup.value); 

This will save you a lot of work if the Book class will have any change in future and became bigger.