Problems with Form using ngDoCheck()

Solution for Problems with Form using ngDoCheck()
is Given Below:

I have a form to edit products, which have a name, category and price. I have 2 hardcoded products and 2 buttons, ‘load product one’ and ‘load product two’. When I click ‘load product one’, edit the product, and then save it (shown by picture one), I cannot load the product anymore(see picture 2). When I click ‘load product one’ a second time, after a save, nothing happens.

I load the product, edit it, and save it

In picture 2 I clicked the load product one after I saved product one:

I load product one again

If I load product2 after saving product 1 it does work. Only loading the same product twice does not go. I think it has to do with the ngDoCheck(). Here follow my component class and my template:

 export class AppComponent {
  products: Product[] = [];
  product: Product = new Product();
  productOne: Product;
  productTwo: Product;
  productToLoad: number = 0;
  constructor() {
  createProducts() {
    this.productOne = new Product(); = 1;"productOne";
    this.productOne.category = 'soccer';
    this.productOne.price = 5.5;
    this.productTwo = new Product(); = 2;"productTwo";
    this.productTwo.category = 'basketball';
    this.productTwo.price = 8.6;

  submitForm(form: NgForm) {
    if (form.valid) {
      // this.model.saveProduct(this.product);

      this.product = new Product();

  ngDoCheck() {
    this.product = new Product();
    Object.assign(this.product, this.products[this.productToLoad]);
  resetForm() {
    this.product = new Product();
  setProduct(key: number) {
    this.productToLoad = key;

Here is my template:

<form novalidate #form="ngForm" (ngSubmit)="submitForm(form)" (reset)="resetForm()">
  <div class="form-group">
    <input class="form-control" name="name"
           [(ngModel)]="" required />

  <div class="form-group">
    <input class="form-control" name="category"
          [(ngModel)]="product.category" required />
  <div class="form-group">
    <input class="form-control" name="price"
           required pattern="^[0-9.]+$" />

  <button type="submit" class="btn btn-primary m-1"
        [class.btn-warning]="true" [disabled]="form.invalid">
  <button type="reset" class="btn btn-secondary m-1">Cancel</button>
<button (click)="setProduct(0)">load product one</button>
<button (click)="setProduct(1)" >load Product two</button>

You should use Angular Reactive Forms. It will greatly simplify your code (see: pachValue()) and it will allow you to use validators :

export class AppComponent {

    // Add validors if needed
    productFormGroup ={
       id: [],
       name: [],
       category: [],
       price: []
    private products: Product[] = [
        new Product(/*...*/),
        new Product(/*...*/)

    constructor(private fb: FormBuilder) {}

    submitForm() {
        if (this.productFormGroup.valid) {
            // Do something with this.productFormGroup.value

    resetForm() {

    setProduct(key: number) {