Async Call in Forms


#1

Hi,

I have been creating forms using this great Article https://www.joshmorony.com/advanced-forms-validation-in-ionic-2/

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 https://engineering.savelist.co/injecting-providers-into-async-custom-validators-in-angular-e54a16956d14 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 = formBuilder.group({
        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.


#2

Have you seen my other tutorial for username validation? https://www.joshmorony.com/username-availability-with-an-asynchronous-validator-in-angular/


#3

Hi Josh,

Thanks for your quick reply.

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


#4

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


#5

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


#6

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');
  }


validateUsername(username){
    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!
injectionError

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.


#7

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


#8

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.


#9

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