Input control in Angular: invalid input not detected

Question

I'm using Angular 8 for my client application. I want an error message to be displayed under the input box for the user when she inserts a wrong input. I'm using this inside my HTML:

  <!-- Score input -->
  <div class="form-group">
    <label for="score">Score</label>
    <input type="number" class="form-control"
           placeholder="0.0 ÷ 10.0"
           min="0.0" max="10.0" step="0.1" name="score"
           id="score"
           [(ngModel)]="model.score"
           #score="ngModel">
    <div [hidden]="score.valid" class="alert alert-danger">
      Insert a value between 0.0 and 10.0
    </div>
  </div>

I would expect it to be displayed if the user was to input "asdf" for example instead of a number like "6.7". But it never appears. I tried removing [hidden]="score.valid" and it gets correctly displayed. Why is Angular considering "asdf" a valid input even if I set all those attributes: type="number" min="0.0" max="10.0" step="0.1" ?

Answer 1

Input fields of type number allow users to type in characters that are not part of a number. See here for details.

I do not see how you handle setting the value of score.valid variable. However, it can be achieved by using CSS pseudo classes.

input:invalid+span:after {
  content: 'Insert a value between 0.0 and 10.0';
  padding-left: 5px;
}

<!-- Score input -->
<div class="form-group">
  <label for="score">Score</label>
  <input id="input-validator" type="number" class="form-control"
         placeholder="0.0 ÷ 10.0"
         min="0.0" max="10.0" step="0.1" name="score"
         id="score"
         [(ngModel)]="model.score"
         #score="ngModel">
  <span class="alert alert-danger"></span>
</div>

Update: To include 'Submit' button.

Template:

<form  #scoreValue="ngForm" (ngSubmit)="submitScore(scoreValue.value)">

  <label>Score: </label>
  <input type="number" class="form-control" (keyup)="onKeyUp($event)" 
    placeholder="0.0 ÷ 10.0"
    [min]="min" [max]="max" [step]="step" name="score"
    id="score"
    [(ngModel)]="score"/>
  <span class="alert alert-danger"></span>
  <br /><br />
  <span> Does not work as expected -> </span>
  <button [disabled]="scoreValue.invalid">Submit</button>
  <br /><br />
  <span> Works as expected -> </span>
  <button [disabled]="disableSubmit">Submit</button>

</form>

Component:

public onKeyUp(event){
  let score = event.currentTarget.value;
  if ((score === '') || ((score.split('.')[1] || []).length > 1)) {
    this.disableSubmit = true;
  } else {
    score = Number(score);
    if ((score >= this.min) && (score <= this.max)) {
      this.disableSubmit = false;
    } else {
      this.disableSubmit = true;
    }
  }
}

Working example: Stackblitz

The min and max attributes set only the minimum and maximum values of the stepper arrows. That is why scoreValue.invalid does not work as expected.

Answer 2

Why let the browser decide the behaviour?
Use a directive

<input appDecimalOnly />

/**
 * Credit: omeralper stackoverflow user
 * https://stackoverflow.com/questions/41465542/angular2-input-field-to-accept-only-numbers
 */
@Directive({
  selector: "[appDecimalOnly]"
})
export class DecimalOnlyDirective {
  constructor(private el: ElementRef) {}

  @HostListener("keydown", ["$event"]) onKeyDown(event) {
    let e = <KeyboardEvent>event;

    // console.log(e.keyCode)

    if (
      [46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
      // Allow: Ctrl+A
      (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+C
      (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+V
      (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+X
      (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
      // Allow: home, end, left, right
      (e.keyCode >= 35 && e.keyCode <= 39)
    ) {
      // let it happen, don't do anything
      return;
    }
    // Ensure that it is a number and stop the keypress
    if (
      (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) &&
      (e.keyCode < 96 || e.keyCode > 105)
    ) {
      e.preventDefault();
    }
  }
}

Stackblitz

Answer 3

For better validation, you have to use FormControl in .ts file, also you could take a look at official doc https://angular.io/guide/form-validation.

FormControl more flexible than ngModel - worth trying:)

scoreControl = new FormControl('',
 Validators.compose([
   Validators.required,
   Validators.pattern('^[0-9]*$'),
   Validators.max(10)
 ])
);

and modify your template with it:

  <div class="form-group">
    <label for="score">Score</label>
    <input type="number" class="form-control"
           placeholder="0.0 ÷ 10.0"
           min="0.0" max="10.0" step="0.1" name="score"
           id="score"
           [formControl]="scoreControl">

    <div *ngIf="score.invalid" class="alert alert-danger">
      Insert a value between 0.0 and 10.0
    </div>

   </div>

Regarding only numbers input you could check here: https://stackoverflow.com/a/41479077/9178709

The best approach is using directive