Form field validation not working Angular 8

Question

I am validating a form field which is created dynamically. I basically have three validations in place:

1. Value inputted should be between 0-10
2. Only numbers should be allowed
3. As the value is added greater than 10 it changes automatically to 10 but I want to show a message below the form field that it cannot be inputted above 10 and the submit button should be disabled. So it is invalid when when larger than 10 is added. 

In my HTML:

 <div class="form-group col-md-6" *ngFor="let p of data; let i = index">
        <label class="textfield_label">{{p.name}}</label>
        <div class="textfield" [class.has-error]="p.usageControl.invalid">
            <div *ngIf="p.usageControl.invalid">
            <input type="text" maxlength="2" min="0" max="10" (keypress)="isNumberKey($event)" (change)="limitUser($event)" class="form-control" id="p.name" name="p.name{{i}}" [(ngModel)]="p.usage" style="border: 2px red solid;" #p.usageControl="ngModel" required>
            <div class="alert alert-danger" style="margin-top: 5px;" *ngIf="p.usageControl.invalid">
               Please enter an number smaller than 10
               </div>
            </div>
            <input [hidden]="p.usageControl.invalid"  maxlength="2" min="0" max="10" (keypress)="isNumberKey($event)" (change)="limitUser($event)" type="text" class="form-control" id="p.name" #p.usageControl="ngModel" class="form-control" [(ngModel)]="p.usage" name="p.name{{i}}" required>
         </div>
      </div>

I have also tried simple:

  <input type="text" maxlength="2" min="0" max="10" (keypress)="isNumberKey($event)" (change)="limitUser($event)" class="form-control" id="p.name" name="p.name{{i}}" [(ngModel)]="p.usage"> 

In my typescript i have two methods:

isNumberKey(evt): boolean{
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)){
      return false;
    }
    return true;
  }
  limitUser(event){
    for (let i = 0; i < this.data.length; i ++) {
      if (this.data[i].usage < 0 || this.data[i].usage === null || this.data[i].usage === "") {
        this.data[i].usage  = 0;
      } if (this.data[i].usage > 10) {
        this.data[i].usage = 10;
      }
    }
  }

limitUser limits the user to input any value above 10 or below 0 as it automatically changes it to 10 or 0 as expected. isNumberOnly makes sure the user only inputs the numbers

Answer 1

For template driven form, you can just check and modifu the value like this:

<input type="number"  [(ngModel)]="usage" min="0" max = "10" (ngModelChange)="usage > 10 ? usage = 10:true"/>

For Reactive form, You can subscribe to the valueChanges of the input, and if it is more that 10, set it to 10 programmatically.

Try like this:

.html

<input type="number" class="form-control" formControlName="usage" />

.ts

this.myForm = this.formBuilder.group({
  usage: [null, [Validators.min(0), Validators.max(10)]]
});

this.myForm.get("usage").valueChanges.subscribe(val => {
  if (val > 10) {
    this.myForm.get("usage").setValue(10);
  }
});

Working Demo