it-swarm.com.de

Angular 2 Formularvalidierung für Zahlen Minimum und Maximum

Ich habe ein Formular mit Eingabefeldern. Die Eingabefelder bestehen aus Text und Zahlen. Und ich muss sie validieren und ich folgte diesem Tutorial und versuchte, sie zu validieren.

Dementsprechend kann ich die Kontrollgruppe wie folgt verwenden, wenn ich eine Zeichenfolge validieren muss.

constructor(fb: FormBuilder){
    this.complexForm = fb.group({
      'firstName' : [null, Validators.required],
      'lastName': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])]
})

Und der HTML-Code dafür lautet wie folgt ...

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
      <div class="form-group">
        <label>First Name:</label>
        <input class="form-control" type="text" placeholder="John" [formControl]="complexForm.controls['firstName']">
      </div>
      <div class="form-group">
        <label>Last Name</label>
        <input class="form-control" type="text" placeholder="Doe" [formControl]="complexForm.controls['lastName']">
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
</form>

Aber ich muss ein Zahlenfeld auch als folgendes Beispiel validieren.

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
          <div class="form-group">
            <label>Age:</label>
            <input class="form-control" type="number"  [formControl]="complexForm.controls['age']">
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-default">Submit</button>
          </div>
</form>

Das Problem ist jedoch, dass Validatoren keine Option zur Auswahl des Mindest- und Höchstwerts für die Eingabe haben.

gibt es jemanden, der eine Lösung für dieses Problem hat?

Vielen Dank.

10

Es gibt keinen eingebauten Validator für Min/Max. Derzeit können Sie in der -Quelle nach Validator suchen, was verfügbar ist.

Sie können eine benutzerdefinierte Prüffunktion erstellen, indem Sie den Tutorials in den offiziellen Dokumenten folgen .

Beispiel:

export function maxValue(max: Number): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    const input = control.value,
          isValid = input > max;
    if(isValid) 
        return { 'maxValue': {max} }
    else 
        return null;
  };
}

Mit diesem können Sie Ihren Code aktualisieren

constructor(fb: FormBuilder){
this.complexForm = fb.group({
  'firstName' : [null, Validators.required],
  'lastName': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])],
  'age': [null, maxValue(60)]
})
11
jkris

Die aktuelle Version von angular 4 hat jetzt Min- und Max-Validatoren

So einfach ist das Schreiben

this.complexForm = fb.group({
   age:[null,[Validators.required, Validators.min(5),Validators.max(90)]],
})

Denken Sie daran, es ist auf dem @angular/forms Repo

$: npm uninstall @angular/forms --save
$: npm install @angular/forms --save
21
user1752532

Wenn ich Ihr Problem behoben habe, versuchen Sie, die Anforderungen Ihrer Prüfer auch in HTML aufzunehmen, damit Ihr Code wie folgt aussieht:

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
  <div class="form-group">
    <label>Age:</label>
    <input class="form-control" type="number" required minlength="5" maxlength="10" [formControl]="complexForm.controls['age']">
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-default">Submit</button>
  </div>
</form>
4
Marcin