wie AsyncValidator Schnittstelle für Formulare in Winkeln 4.0.0 rc.1

Question

Angular 4.0.0 rc.1 veröffentlicht am 24. Februar 2017 verwenden
Es gibt zwei Änderungen für Formen
Formen: hinzugefügt Option Browser verwenden nativen Validierung und kantigen Formen
Formen: einführen AsyncValidator Schnittstelle
Wie AsyncValidator Schnittstelle für Formulare verwenden, und wie können wir Browser nativen Validierung aktiviert?

Answer 1

Sie würden es auf die gleiche Weise verwenden wie Sie eine normale Validator. Der einzige Unterschied besteht darin, dass Sie anstelle eines Objekts ValidationErrors ein Promise oder Observable zurückgeben, das in das Objekt ValidatorErrors aufgelöst wird. Hier

ein Beispiel:

this.formBuilder.group({ 
    name: ['', [ Validators.required ]], 
    email: ['', [ Validators.required ]] 
}); 

Dies ist eine einfache Anmeldeformular mit erforderlichen Felder aus. Nehmen wir an, Sie möchten Ihren Server anrufen, um sicherzustellen, dass die E-Mail nicht bereits verwendet wird.

Duplikat-email.ts

export class DuplicateEmail { 
    constructor(private backendService: BackendService) {} 

    validate(c: AbstractControl): Observable<ValidationErrors> { 
    return this.backendService.isDuplicateEmail(c.value) 
     .map(response => response ? { duplicateEmail: true } : null); 
    } 
} 

form.component.ts

this.formBuilder.group({ 
    name: ['', [ Validators.required ]], 
    email: ['', [ Validators.required ], [ duplicateEmail ]] 
}); 

Congrats, haben Sie implementiert nun einen Asynchron-Validator!