I have created a custom directive for my asynchronous validator:
@Directive({
selector: '[validatorUsername]',
providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: ValidatorUsernameDirective, multi: true }]
})
export class ValidatorUsernameDirective implements Validator {
validate(c: AbstractControl) {
let username = c.value;
return new Promise(resolve => {
setTimeout(() => {
if( username === "nemo" ) {
resolve({
'taken': true
})
} else {
resolve(null);
}
}, 1000);
});
}
}
In the HTML template, I've used it in this way:
<input type="text" [(ngModel)]="username" name="username" required validatorUsername>
Next, I assigned validation messages programmatically, following Angular's Cookbook, under Form Validation:
export class App implements OnInit {
@ViewChild('myForm') myForm: NgForm;
name: string;
username: string;
ngOnInit() {
this.myForm.valueChanges.subscribe(_ => this.onValueChanged());
}
onValueChanged() {
// populate 'formErrors' object
}
formErrors = {
'name': '',
'username': ''
};
}
The main issue is that onValueChanged() does not get called when the promise from the validator resolves, hence the validation message for username doesn't show up. It does appear when editing the name field. How can I make sure the UI updates accordingly?
Here is the plunker with my code.
References:
- Angular2 template driven async validator
- https://angular.io/docs/ts/latest/cookbook/form-validation.html