Ionic2 Form server validation

Hello,

I have made form with serval validation who work well. I want use Custom validation but I can’t find how can I make server call. I have search on many documentation and blog article…

I’m based on this tutorial: http://www.joshmorony.com/advanced-forms-validation-in-ionic-2/

With fake server answer it’s work well. But with “static” method i can’t make real call with server. I don’t know how I can fix this problem.

Thanks you,

Is it because you can’t inject htp provider into constructor? Why don’t you try to set up a new http instance manually?

Hi thanks you for your help!

When I inject my provider like this:
static checkUsername(control: Control, dataService:Data) {
It’s doesn’t work

Thanks you,

Alright… I tried several things… since I may facing this issue as well in future… Yes, its true you can’t inject any other parameter into the validation method, as it only take ‘Control’ object. And I’m not sure if it will work since the validation rules expected result in the form of { [s: string]: boolean }. I never knew it could receive promise as result. Never try it though.

So, you can’t bring your service in here. But, for me, validation is nothing but a simple kind of utilities of some sort. It it’s me, I would make http request directly within the validator.

I was cheating a bit. To be honest, I never use angular-own http library. Instead, I’m using ‘Axios’. Here’s a sample of the code. Never get the chance to verify whether it will work or not. But the typescript compiler never throw me any error. Not sure if it will throw error on runtime instead. I’m currently upgrading my form to the new beta11. Maybe I can give it a try later on.

static isUsernameValid(control: Control):any {
        let deferred = q.defer()
        axios.get('http://url')
            .then(
            (result) => {
                if(!result){
                    deferred.resolve( { invalidUsername: true } );
                }
            })
            .catch((error) => {
                deferred.reject(error)
            })
        return deferred.promise
        
    }


Hi, thanks for you answer.

I have try to import your code but i’ve got error:
=> Error TS2304: Cannot find name ‘q’.
=> Error TS2304: Cannot find name ‘axios’.

So I can’t use axios it’s not imported and usable.

Thanks for you help. I continue to search work around. If I found the solution I will post here.

You’ll have to install both q and axios through npm… and include typings definition to be able to use it… its an external library…

No luck…

I’ve got error in browser. ReferenceError q is not defined.

Thanks you,

Try the first method of this post, this worked for me.

Hi, thanks for you answer.

Your made my day! This solution works well:

let validator = (control) => {
    return this.YourService.YourFunction(control);
};

And after

this.registerForm = formBuilder.group({
    'username': ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.pattern('[a-zA-Z0-9]*')]), validatorTest],
    'password': ['', Validators.compose([Validators.required, Validators.minLength(5)])],
    'password2': ['', Validators.compose([Validators.required, Validators.minLength(5)])],
    'email': ['', EmailValidator.isValid],
});

Thanks you verry much for you help!