Topic: Custom async validators don't work!
SteelLiras free asked 6 years ago
Hello,
I've been trying to add a async validator to an input with mdbInputDirective (server-side username validation). I'm sure it works, even control's .valid property changes properly. The problem is, the input is still marked in green by the MDB directive. How do I fix this?
import { Directive, forwardRef } from "@angular/core";
import {
Validator,
AbstractControl,
NG_ASYNC_VALIDATORS
} from "@angular/forms";
import { DynamicValidationService } from "@app/core";
import { timer, from } from "rxjs";
import { switchMap, map, tap } from "rxjs/operators";
@Directive({
selector:"[app-usernameDynamic][ngModel]",
providers: [
{
provide:NG_ASYNC_VALIDATORS,
useExisting:forwardRef(() =>UsernameValidator),
multi:true
}
]
})
export class UsernameValidator implements Validator {
constructor(private_serverValidation:DynamicValidationService) {}
publicvalidate(c:AbstractControl) {
returnthis.validateUsername(c.value);
}
privatevalidateUsername(username:string) {
return timer(300).pipe(
switchMap(() => {
const validationPromise=this._serverValidation.remoteValidate(
"users",
"username",
{ auth: { username: username } }
);
return from(validationPromise).pipe(
map(valid=> (valid?null: { server: { valid:false } }))
);
}),
tap(val=>console.log(val))
);
}
}
<div class="md-form form-group input-group mb-4">
<i class="fa fa-user prefix"></i>
<input mdbInputDirectivetype="text"class="form-control"name="username"id="username" (ngModelChange)="authModified = true"
data-error="Field invalid"data-success=" " [(ngModel)]="user.auth.username"minLength="5"required app-usernameDynamic>
<labelclass="active"for="username">Username</label>
</div>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
Damian Gemza staff commented 6 years ago
Dear SteelLiras, Could you please try to install MDB Angular Pro from our repository dev branch? We rebuild mdbInputDirective validation, and maybe now your problem will be gone. Repository link: https://git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard Please let me know. Best Regards, Damian