Reactive Forms correctly convert Form Value to Model Object

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.

Continue reading...