// register-page.ts
this.userForm = new FormGroup(
{
username: new FormControl(null,
[
Validators.required,
Validators.minLength(3),
Validators.maxLength(30),
Validators.pattern('^[a-zA-Z-0123456789]*$'),
]
),
// accountService.ts
validateUser(username: string): Observable<any> {
return this.httpManager.post(authServer + "user-validator", new ValidateUserRequest(username)).pipe(
map(
(response: Response) => {
return response.data;
}
)
);
}
// register-page.html
<ion-item [ngClass]="username==null ? 'at-beginning':''">
<ion-label position="floating">Username</ion-label>
<ion-input name="username" formControlName="username" inputmode="text" class="ion-text-lowercase"
placeholder="Username" (onchange)=(checkUsername($event)) (keypress)=(onKeyUp($event)) (keydown.space)="$event.preventDefault()">
</ion-input>
</ion-item>
<div class="err" *ngIf="formControls.username.errors">
<div *ngIf="formControls.username.errors.required">Username is required.</div>
<div *ngIf="formControls.username.errors.minlength">Your username is too short.</div>
<div *ngIf="formControls.username.errors.maxlength">Your username is too long.</div>
<div *ngIf="formControls.username.errors.pattern">Username cannot contain special characters.</div>
<div *ngIf="formControls.username.errors.checkUsername">Username is already taken.</div>
</div>
Trying to implement a username validator that checks for availability as user types. Spent two days on it without success, realized I need an async function that subscribes to data from
accountService.validateUseranem(control.value)