it-swarm.com.de

Überprüfung der Eingabetypnummer "nur numerischer Wert"

Wie kann ich überprüfen, dass eine Eingabe von type="number" nur gültig ist, wenn der Wert numerisch oder null ist und nur Reactive Forms (keine Direktiven) verwendet wird?
Nur Zahlen [0-9] und. sind erlaubt, kein "e" oder andere Zeichen.


Was ich bisher ausprobiert habe:

Vorlage:

<form [formGroup]="form" novalidate>
    <input type="number" formControlName="number" id="number">
</form>

Komponente:

export class App {
  form: FormGroup = new FormGroup({});

  constructor(
    private fb: FormBuilder,
  ) {
    this.form = fb.group({
      number: ['', [CustomValidator.numeric]]
    })
  }
}

CustomValidator:

export class CustomValidator{
  // Number only validation
  static numeric(control: AbstractControl) {
    let val = control.value;

    if (val === null || val === '') return null;

    if (!val.toString().match(/^[0-9]+(\.?[0-9]+)?$/)) return { 'invalidNumber': true };

    return null;
  }
}

Plunker

Das Problem ist, wenn ein Benutzer etwas eingibt, das keine Zahl ist ("123e" oder "abc") der Wert von FormControl zu null wird. Denken Sie daran, dass das Feld nicht wirklich erforderlich ist ist leer null Wert sollte gültig sein.

Die Browserübergreifende Unterstützung ist ebenfalls wichtig (die Zahleneingabefelder von Chrome erlauben dem Benutzer nicht die Eingabe von Buchstaben - mit Ausnahme von "e", FireFox und Safari).

15
Mihailo

In der HTML-Datei können Sie für dieses Muster ein ngIf-Muster hinzufügen

<div class="form-control-feedback" *ngIf="Mobile.errors && (Mobile.dirty || Mobile.touched)">
        <p *ngIf="Mobile.errors.pattern" class="text-danger">Number Only</p>
      </div>

In der .ts-Datei können Sie das Validator-Muster hinzufügen - "^ [0-9] * $"

this.Mobile = new FormControl('', [
  Validators.required,
  Validators.pattern("^[0-9]*$"),
  Validators.minLength(8),
]);
14
Ishara Madawa

Der einfachste Weg wäre, eine Bibliothek wie one zu verwenden, und Sie möchten, dass noStrings wahr ist

    export class CustomValidator{   // Number only validation   
      static numeric(control: AbstractControl) {
        let val = control.value;

        const hasError = validate({val: val}, {val: {numericality: {noStrings: true}}});

        if (hasError) return null;

        return val;   
      } 
    }
1
luanped

Manchmal ist es einfach einfacher, etwas so einfaches auszuprobieren.

validateNumber(control: FormControl): { [s: string]: boolean } {

  //revised to reflect null as an acceptable value 
  if (control.value === null) return null;

  // check to see if the control value is no a number
  if (isNaN(control.value)) {
    return { 'NaN': true };
  }

  return null; 
}

Hoffe das hilft.

aktualisiert per Kommentar, Sie müssen den Validator so aufrufen 

number: new FormControl('',[this.validateNumber.bind(this)])

Das bind (this) ist notwendig, wenn Sie den Validator in die Komponente einfügen. So mache ich es.

0
Ken

In Ihrem benutzerdefinierten Prüfer müssen Sie reguläre Ausdrücke verwenden. Der folgende Code erlaubt beispielsweise nur 9 Ziffern in den Eingabefeldern:

function ssnValidator(control: FormControl): {[key: string]: any} {
  const value: string = control.value || '';
  const valid = value.match(/^\d{9}$/);
  return valid ? null : {ssn: true};
}

Sehen Sie sich hier eine Beispiel-App an:

https://github.com/Farata/angular2TypeScript/tree/master/Angular4/form-samples/src/app/reactive-validator

0
Yakov Fain