Async Call in Forms


I have been creating forms using this great Article

I am able to create form perfectly and working fine, but problem i am facing is to check ‘Username Exists’ using Async Call to APIs. Using this Article technique to inject Providers into Validator. But its not working. I am getting errors in .TS file.

Here is my Validator Code -

import { FormControl } from '@angular/forms';
import { AuthService } from '../providers/auth-service';

export class UserValidator {

  static userService: AuthService;
  static EMAIL_REGEXP = /.+@.+\..+/;

  constructor(userService: AuthService) {
    UserValidator.userService = userService;

  checkEmailAvailable(input: FormControl) {

    if (!input.value || !UserValidator.EMAIL_REGEXP.test(input.value)) {
      return Promise.resolve({ invalid: true });

    return UserValidator.userService.checkEmail(input.value)
    .then(data => data && data.available ? null : data)
    .catch(err => console.error(err));



This is how i am trying to call it in validators, but it not working

this.slideTwoForm ={
        username: ['',Validators.compose([Validators.required, Validators.pattern('[a-zA-Z]*')]), new UserValidator(userService).checkEmailAvailable],

Error message i am getting is

Error: Uncaught (in promise): ReferenceError: userService is not defined

Please help me to sort it out, i am starting of creating a long form, it will really help me.

Thanks in advance.

Have you seen my other tutorial for username validation?

Hi Josh,

Thanks for your quick reply.

I have not checked this one. I will go through it and work on it.

I recommend using a lambda instead of this static property technique.

Thanks for your suggestion, Rapropos. Will go through lambda later. I am just start of my learning IONIC Curve :slight_smile:

Hi Josh,

I have followed this tutorial but i am struck at provider part. I am getting this error message -

Module '"D:/phone/advform3/src/providers/auth/auth"' has no exported member 'AuthProvider'.

Here is my Provider Code, auth.ts

import { Http} from '@angular/http';
import 'rxjs/add/operator/map';

export class Auth {

  constructor(public http: Http) {
    console.log('Hello AuthService Provider');

    return this.http.get(SERVER-URL).map(res => res.json());


If i change my Export Class to AuthProvider and rename file name, then it display error message as

Uncaught (in promise): Error: No provider for AuthProvider!

In normal providers, we uses as AuthProvider and filenames as auth-provider.js, being in a validators it seems to be different. Can you please advice?

Here are my environment details

Ionic Framework: 3.6.1
Ionic App Scripts: 2.1.4
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.11.3
OS Platform: Windows 7

Thanks in advance.

This means “you forgot to declare it in the app module as a provider”.

Thanks for your reply, Rapropos, i tried by adding it in app module then it comes up with another error message

Can't resolve all parameters for AuthProvider

So i am not using provider now, i have directly added that function in usernamevalidator.ts

I know its not a 100% correct and can’t be reuse however i am not going to use it in any other file for now.

Thanks for your help. Really appreciate it.

Are we sure you also have HttpModule imported in the app module?