javascript - vstupný typ="number" obsahuje null namiesto znaku

Mám vstupné pole number, ktoré chcem validovať pomocou Angular2:

<input type="number" class="form-control" name="foo" id="foo"
       [min]="0" [max]="42" [(ngModel)]="foo" formControlName="foo">

Doteraz to funguje v Chrome dobre, pretože Chrome ignoruje znaky ako vstup (nevkladá ich do vstupu -> vstup je prázdny -> spustí sa požiadavka na overenie, alebo už je tam číslo, takže sa spustí overenie minimálnej/maximálnej hodnoty).

Problém

Firefox na druhej strane umožňuje používateľovi zadávať znaky do vstupu a tu je problém, ak vložím znaky, potom sa spustí požadovaná validácia a hodnota ovládacieho prvku formulára sa vyhodnotí ako null, čo vedie k tomuto:

Otázka

Chcem rozlíšiť medzi prázdnymi hodnotami a neplatnými vzormi, ale jediný spôsob, ktorý som našiel na dosiahnutie tohto, je použiť input type="text" a použiť validátor vzoru, pretože hodnota vstupu je null (ak obsahuje znaky) a validátor vzoru sa nespustí na input type="number".

  • Existuje spôsob, ako získať skutočnú hodnotu poľa pomocou objektu Angular2 FormGroup (aj keď document.querySelector('#foo').value vyhodnotí na null, hoci vstup obsahuje 42bar)?

  • Alebo existuje spôsob, ako skontrolovať, či vstupné pole obsahuje znaky?

  • Alebo neexistuje žiadny iný spôsob, ako použiť input type="text"?

Odpoveď č. 1

Ak do vstupu typu „číslo“ napíšete niečo, čo nie je číslo, hodnota bude null. Takto to má fungovať.

Môžete skontrolovať príznak .validity.valid, aby ste zistili, či má pole platnú hodnotu; prázdna hodnota sa považuje za platnú pre číselné polia.

Súvisiace články