Wie benutzerdefinierte Async-Validator in Angular4 zu implementieren

Question

Ich bin Angular 4 in meinem Projekt anwenden, und ich habe Probleme mit benutzerdefinierten Validierung mit HTTP-Anfrage.

ich diesen auch How to implement Custom Async Validator in Angular2

versuchen Aber es in meinem Projekt nicht funktioniert.

Hier ist, was ich bisher getan habe:

Abwarten

Validierung:

userName: ['', [Validators.required, Validators.minLength(3), this.validateUserName.bind(this)]] 

Wertänderungen Ereignis:

let userNameControl = this.individualForm.get('userName'); 
userNameControl.valueChanges.subscribe(value => { 
    this.setErrorMessagesForUserNameControl(userNameControl) 
    } 
); 

Validierungsfunktion:

validateUserName(control: FormControl): Promise<any> { 
let promise = new Promise<any>(
    (resolve, reject) => { 
    if (this.oldUserNameForCheck != undefined) { 
     this._individualUpdateService.isUserNameExisting(this.oldUserNameForCheck, control.value).subscribe(
     (res) => { 
      if (res.isUserNameExisting) { 
      console.log("existing"); 
      resolve({'existing': true}); 
      } else { 
      console.log("NOT existing"); 
      resolve(null); 
      } 
     }, 
     (error) => { 
      console.log(error); 
     } 
    ); 
    } else { 
     resolve(null); 
    } 
    } 
); 
return promise; 
} 

Error Messages

Ich versuche nur, den Benutzernamen zu validieren, indem Sie es an Back-End senden.

Here's the logs

Wie Sie sehen können, gibt es eine Nachricht für "erforderlich", "minlength", jene Arbeit in Ordnung. Aber die Nachricht für die benutzerdefinierte Validierung ist nicht ganz klar. Ich schätze Ihre Hilfe, Dank fortschrittlichen :)

Answer 1

Async Validator im nächsten Parameter sein sollte

userName: ['', 
    [ Validators.required, Validators.minLength(3) ], 
    [ this.validateUserName.bind(this) ] 
] 

Auch ist es besser eine Factory-Methode mit erforderlichen Abhängigkeiten zu haben, der Prüfer erstellen würde, statt mit ' binden (das) '

userNameValidator(originalUsername, individualUpdateService) { 
    return (control: FormControl): Promise<any> => { 
     return new Promise<any>((resolve, reject) => { 
      if (originalUsername != undefined) { 
       individualUpdateService.isUserNameExisting(originalUsername, control.value).subscribe(
        (res) => { 
         if (res.isUserNameExisting) { 
          console.log("existing"); 
          resolve({ 'existing': true }); 
         } else { 
          console.log("NOT existing"); 
          resolve(null); 
         } 
        }, 
        (error) => { 
         console.log(error); 
        } 
       ); 
      } else { 
       resolve(null); 
      } 
     }) 
    } 
} 

userName: ['', 
    [ Validators.required, Validators.minLength(3) ], 
    [ this.userNameValidator(this.oldUserNameForCheck, this._individualUpdateService) ] 
]