Angular, Init form inputs are invalid but value is valid

Issue

I made an angular form with two inputs number and one select. I fill these inputs with a model values, but the two numbers inputs is invalid and i need to click inside it to change it to valid.

I use inputs like this :

<input type="text"
  name="price"
  id="price"
  [(ngModel)]="chair.price"
  formControlName="price"
  class="form-control form-control-lg form-control-solid"
  [ngClass]="{
      'is-invalid': editPriceForm.controls['price'].invalid,
      'is-valid':editPriceForm.controls['price'].valid
   }"
/>

So in the initial render form, i get the good value in the inputs but the class of the input is 'is-invalid', and i don't know why. I try to trigget a markAllAsTouched but nothing change.

When i click inside the input, and click out, the class change to become valid.

Do you know if something is possible to tell to the form to be rechecked after filling data ?

Solution

You are mixing two different types of Angular's handling of forms. First, refactor your code to either Template Driven Forms by removing formControlName and only using [(ngModel)] or by removing [(ngModel)] and only use formControlName so that your code is Reactive Forms.

Answered By - HassanMoin