Angular 4 Mobilnummer Validierung

Question

Ich möchte eine Handynummer mit Angular 4 validieren und keine anderen Zeichen als Ziffern mit bis zu 10 Ziffern akzeptieren.

Unten ist mein Code,

<input type="text" formControlName="mobileNo" minlength=10 maxlength=10> 

Answer 1

<input type="text" (keypress)="keyPress($event)" minlength=10 maxlength=10> 


    keyPress(event: any) { 
    const pattern = /[0-9\+\-\ ]/; 

    let inputChar = String.fromCharCode(event.charCode); 
    if (event.keyCode != 8 && !pattern.test(inputChar)) { 
     event.preventDefault(); 
    } 
    } 

Answer 2

Die keyPress Ereignis jedoch für Chrom gearbeitet für Firefox funktioniert nicht. In Chrome Tasten drücken wie Backspace und Pfeiltasten Ereignisse werden standardmäßig ignoriert und führt nicht die Funktion jedoch in Firefox es läuft und diese nicht funktionieren. Ich habe eine kleine Linie if (event.charCode !== 0)

_keyPress(event: any) { 
    if (event.charCode !== 0) { 
     const pattern = /[0-9\+\-\ ]/; 
     const inputChar = String.fromCharCode(event.charCode); 

     if (!pattern.test(inputChar)) { 
     // invalid character, prevent input 
     event.preventDefault(); 
     } 
    } 
    } 

Answer 3

nur

Validatoren Muster hinzufügen

mobileNumber: new FormControl(null, [Validators.pattern("[0-9]{0-10}")]) 

und die Art wird Nummer sein, und es wird vermieden, alle Zeichen