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() {
    this.createProducts();
  }
  createProducts() {
    this.productOne = new Product();
    this.productOne.id = 1;
    this.productOne.name="productOne";
    this.productOne.category = 'soccer';
    this.productOne.price = 5.5;
    this.productTwo = new Product();
    this.productTwo.id = 2;
    this.productTwo.name="productTwo";
    this.productTwo.category = 'basketball';
    this.productTwo.price = 8.6;
    this.products.push(this.productOne);
    this.products.push(this.productTwo);
  }

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

      this.product = new Product();
      form.reset();
    }
  }

  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">
    <label>Name</label>
    <input class="form-control" name="name"
           [(ngModel)]="product.name" required />
  </div>

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

  <button type="submit" class="btn btn-primary m-1"
        [class.btn-warning]="true" [disabled]="form.invalid">
    save
</button>
  <button type="reset" class="btn btn-secondary m-1">Cancel</button>
</form>
<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 = this.fb.group({
       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() {
        this.productFormGroup.reset();
    }

    setProduct(key: number) {
        this.productFormGroup.patchValue(this.products[key]);
    }

}