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.
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
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.
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?