Angular2 - FormControl Validierung auf Unschärfe

Question

Ich bin dabei, einige grundlegende E-Mail-Validierung hinzufügen, um zu überprüfen, dass der Benutzer eine korrekte E-Mail-Adresse eingegeben hat. Wenn Sie die unten beschriebene Methode verwenden, wird die Validierung aktualisiert, wenn der Benutzer eingibt, was merkwürdig aussieht, wenn nach der Eingabe eines Zeichens ein Fehler auftritt.

validEmail(c: Control){ 
if(!c.value.match('[a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?')){ 
    return { 
    validEmail: true 
    }; 
} 
return null; 
}  

ctrlEmailAddress: Control = new Control('', Validators.compose([ 
Validators.required, this.validEmail])); 

ich mich gefragt, ob es möglich ist, die Validierung auf Unschärfe des Feldes auslösen, wie in AngularJS mit:

ng-model-options="{ updateOn: 'blur' }" 

Ich bin mir bewusst, die Unschärfe Option auf dem Eingabefeld innerhalb der html, aber das bringt mein Steuerelement nicht in Fehler, außer es gibt eine Möglichkeit, das Steuerelement in einen Fehlerzustand zu versetzen.

Könnte mir jemand helfen, mich in die richtige Richtung zu weisen?

Danke.

Edit: Ich bin auf der Suche nach einer angular2 Lösung, keine angularJS Lösung.

Answer 1

Sie können

[class.has-error]="!form.controls['ctrlEmailAddress'].valid" 

Dies fügt hat-Fehlerklasse, sobald Sie Modell ändern wird. Sie müssen also im Grunde nicht verwischen, um eine Validierungsprüfung durchzuführen.

Answer 2

Etwas wie folgt aus: Verwenden Eigenschaft berührt der ngControl Objekt.

<div class="form-group" [class.has-error]="!name.valid && name.touched"> 
     <label for="name">Name</label> 
     <input #name="ngForm" ngControl="name" name="name" type="text" class="form-control" required> 
</div> 

Answer 3

Gefunden einen Weg, in RC6.

1- Erstellen Sie eine Richtlinie: Validierung-onblur.directive.ts

@Directive({ 
    selector: '[validate-onblur]', 
    host: { 
    '(focus)': 'onFocus($event)', 
    '(blur)': 'onBlur($event)' 
    } 
}) 
export class ValidateOnBlurDirective { 
    constructor(public formControl: NgControl) { 
    } 

    onFocus($event) { 
     this.formControl.control.markAsUntouched(false); 
    } 

    onBlur($event) { 
     this.formControl.control.markAsTouched(true); 
    } 
} 

Dann in Ihrem HTML-Vorlage fügen Sie einfach die Richtlinie zum Formular, mein Beispiel das ReactiveFormsModule Modell verwenden.

Dann fügen Sie diese an Ihre Fehlermeldung:

<input type="text" formControlName="full_name" validate-onblur /> 

<span *ngIf="formAccountDetails.controls.full_name.touched && !formAccountDetails.controls.full_name.valid && !formAccountDetails.controls.full_name.pristine" class="errors"> 
     ... 
</span> 

Answer 4

EDIT 2

Wie Alex und die official documentation sagt, Angular Version 5.0.0 hat neue Option für Ihre ngModel updateOn: 'blur'

this.email = new FormControl(null, { 
    validators: Validators.required, 
    updateOn: 'blur' 
}); 

Auch Sie kann andere Update-Optionen verwenden: change (Standard), blur, submit.

---

Original-

I-Direktive verwenden, wo ganze Validierung Fokus entfernen und sendet es zurück nach Unschärfe Ereignisse. Es basiert auf Cristian Deschamps Antwort.

I aktualisieren Gültigkeit nur auf verwischen, so dass, wenn Wert vor Fokus ungültig war, wird es nach ungültig. Wenn Sie jedoch die Eingabe starten, wird die Gültigkeit aktualisiert.

Aus irgendwelchen Gründen Clearing um Sinn machen, so dass ich klar Asynchron-Validierer zuerst.

Jede bereitgestellt Vorschlag wird hilfreich sein =)

import { Directive } from '@angular/core'; 
import { NgControl } from '@angular/forms'; 

@Directive({ 
    selector: '[validate-onblur]', 
    host: { 
    '(focus)': 'onFocus($event)', 
    '(blur)': 'onBlur($event)' 
    } 
}) 
export class ValidateOnBlurDirective { 
    private validators: any; 
    private asyncValidators: any; 
    constructor(public formControl: NgControl) { 
    } 
    onFocus($event) { 
     this.validators = this.formControl.control.validator; 
     this.asyncValidators = this.formControl.control.asyncValidator; 
     this.formControl.control.clearAsyncValidators(); 
     this.formControl.control.clearValidators(); 
    } 

    onBlur($event) { 
     this.formControl.control.setAsyncValidators(this.asyncValidators); 
     this.formControl.control.setValidators(this.validators); 
     this.formControl.control.updateValueAndValidity(); 
    } 
} 

Sie bitte auch auf dieser Angular 2 github thread über onBlur Validierung

---

EDIT 1

Es gibt ein weiteres Problem bleibt dran - wenn ich nur auf das Feld klicke und nach Klick weg - Validierung wird aufgerufen. Wenn Sie eine Benachrichtigung darüber (oder Serveraufrufe) haben, wird es jedes Mal angezeigt, wenn Sie es tun. So können Sie wasChanged Eigenschaft hinzufügen und es wie folgt verwendet werden:

@Directive({ 
     selector: '[validate-onblur]', 
     host: { 
      '(focus)': 'onFocus($event)', 
      '(blur)': 'onBlur($event)', 
      '(keyup)': 'onKeyup($event)', 
      '(change)': 'onChange($event)', 
      '(ngModelChange)': 'onNgModelChange($event)' 
     } 
    }) 
    export class ValidationOnBlurDirective { 
     private validators: any; 
     private asyncValidators: any; 
     private wasChanged: any; 
     constructor(public formControl: NgControl) { 
     } 
     onFocus($event) { 
      this.wasChanged = false; 
      this.validators = this.formControl.control.validator; 
      this.asyncValidators = this.formControl.control.asyncValidator; 
      this.formControl.control.clearAsyncValidators(); 
      this.formControl.control.clearValidators(); 
     } 
     onKeyup($event) { 
      this.wasChanged = true; // keyboard change 
     } 
     onChange($event) { 
      this.wasChanged = true; // copypaste change 
     } 
     onNgModelChange($event) { 
      this.wasChanged = true; // ng-value change 
     } 
     onBlur($event) { 
      this.formControl.control.setAsyncValidators(this.asyncValidators); 
      this.formControl.control.setValidators(this.validators); 
      if (this.wasChanged) 
       this.formControl.control.updateValueAndValidity(); 
     } 
    } 

Answer 5

ich ein wenig Alex Shestakov Lösung verbessert haben, die bereits durch die Art und Weise gearbeitet, um den Steuerzustand gültig zu vermeiden eingestellt wird, wenn sich sein Wert ändert während es den Fokus behält.

@Directive({ 
    selector: '[validate-onblur]', 
    host: { 
     '(focus)': 'onFocus($event)', 
     '(blur)' : 'onBlur($event)' 
    } 
}) 
export class ValidateOnBlurDirective { 

    private validators: any; 
    private asyncValidators: any; 
    private hasFocus = false; 

    constructor(public formControl: NgControl) { 
    } 

    onFocus($event) { 
     this.hasFocus = true; 
     this.validators = this.formControl.control.validator; 
     this.asyncValidators = this.formControl.control.asyncValidator; 
     this.formControl.control.clearAsyncValidators(); 
     this.formControl.control.clearValidators(); 
     this.formControl.control.valueChanges 
      .filter(() => this.hasFocus) 
      .subscribe(() => this.formControl.control.markAsPending()); 
    } 

    onBlur($event) { 
     this.hasFocus = false; 
     this.formControl.control.setAsyncValidators(this.asyncValidators); 
     this.formControl.control.setValidators(this.validators); 
     this.formControl.control.updateValueAndValidity(); 
    } 
} 

Auf diese Weise bleibt die Steuerung im Status "Ausstehend", solange der Fokus beibehalten wird. Dies wird helfen, den Fall zu vermeiden, wenn ein Steuerelement ungültig ist, bevor es den Fokus erhält, und dann, sobald der Benutzer darauf tippt, wird es als gültig markiert, bevor das Unschärfeereignis eintritt, wenn die Validatoren erneut gesetzt werden und die tatsächliche Gültigkeit von Die Kontrolle sollte bestimmt werden.

Answer 6

Ab Winkel v 5.0.0 Dies ist jetzt möglich, indem Sie an die Formularsteuerung markieren.

Dies bedeutet auch, dass valueChanges nicht für diese Form Kontrolle abfeuert, bis die Unschärfe Ereignis eintritt. Hier ist ein Beispiel wiht minlength zusammen mit required:

this.form = new FormGroup({ 
    username: new FormControl('', { 
    validators: [Validators.required, Validators.minLength(6)], updateOn: 'blur'}) 
}) 

get username() { 
    return this.form.get('username'); 
} 

In der Vorlage möchten Sie würden markieren, dass die Überprüfungsmeldung wird nicht angezeigt, es sei denn das Feld ist touched:

<div *ngIf="username.hasError('minlength') || username.hasError('required') 
       && username.touched">Required and minlength 6! 
</div> 

DEMO

PS Wenn Sie auch benötigt wird, kann diese Markierung auf der w Loch Form, nicht nur auf einer bestimmten Form Kontrolle