javascript - Validator Angular 8 pentru input de tip număr


Am un câmp de input de tip număr care permite, în mod implicit, introducerea unor caractere precum '+' '-' '.'

HTML

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

TypeScript

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.createForm();
  }

  private createForm(): void {
    this.personalForm= this.formBuilder.group({
        numberChildren: [null, [Validators.required, Validators.pattern('[0-9]{2}')]],

    })
  }

Vreau să implementez o logică care acceptă doar numere fără '+' '-' '.'

Notă: este obligatoriu să folosiți numărul ca tip al intrării

Răspuns #1

Poți să te înregistrezi la evenimentul keypress pentru a ignora caracterele pe care nu le dorești, cum ar fi caracterul +. Aceasta ar putea fi, de asemenea, mai prietenoasă cu utilizatorul pentru că nu este afișat niciun mesaj de eroare, ci pur și simplu împiedică adăugarea caracterului în câmpul de introducere.

<input type="number"
  class="form-control"
  (keypress)="($event.charCode === 8 || $event.charCode === 0 || $event.charCode === 13) ? null : $event.charCode >= 48 && $event.charCode <= 57"
  formControlName="numberChildren"/>

charCode este caracterul ASCII folosit. Acest lucru va permite numere, precum și ENTER și BackSpace.