Ngx-chips: Using validators to validate an email input

Created on 1 May 2018 · 5Comments · Source: Gbuomprisco/ngx-chips

PLEASE MAKE SURE THAT:

you searched similar issues online (9/10 issues in this repo are solved by googling, so please...do it)
you provide an online demo I can see without having to replicate your environment
you help me by debugging your issue, and if you can't, do go on filling out this form

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[] support request/question

Notice: feature requests will be ignored, submit a PR if you'd like

Current behavior

When I'm trying to use validators to validate an email address, It gives me 'ExpressionChangedAfterItHasBeenCheckedError' from TagInputComponent.Html.

untitled

Expected behavior

Use validators to do our own validations. example - email, number or pattern matching.

Minimal reproduction of the problem with instructions (if applicable)

public validators = [this.emailValidation];

private emailValidation(control: any) {
let sEmail = EmailValidator.validate(control.value);
if (sEmail == false) {
return {
'emailValidation': true
};
}
return null;
}

What do you use to build your app?. Please specify the version

Webpack/ angular

Angular version:

5.0

ngx-chips version:

Latest as i installed it today (2018-05-01)

Source

ImChamZ

Most helpful comment

As for me all works fine.

in component ts

    public validators = [ this.must_be_email ];
    public errorMessages = {
        'must_be_email': 'Enter valid email adress!'
    };
    private must_be_email(control: FormControl) {        
        var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
        if (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) {
            return { "must_be_email": true };
        }
        return null;
    }

in component html

<tag-input [ngModel]="emails"
        [errorMessages]="errorMessages" 
        [validators]="validators"
        [placeholder]="'Enter emails'" 
        [secondaryPlaceholder]="'Enter emails'">
    </tag-input>

Hope its helps you.

SergeyMNet on 7 May 2018

👍5

All 5 comments

As for me all works fine.

in component ts

    public validators = [ this.must_be_email ];
    public errorMessages = {
        'must_be_email': 'Enter valid email adress!'
    };
    private must_be_email(control: FormControl) {        
        var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
        if (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) {
            return { "must_be_email": true };
        }
        return null;
    }

in component html

<tag-input [ngModel]="emails"
        [errorMessages]="errorMessages" 
        [validators]="validators"
        [placeholder]="'Enter emails'" 
        [secondaryPlaceholder]="'Enter emails'">
    </tag-input>

Hope its helps you.

SergeyMNet on 7 May 2018

👍5

Hi @ImChamZ, the error oddly doesn't seem related to the validation issue. DO you have an online demo to show me?

Gbuomprisco on 7 May 2018

Hi, I was able to avoid this error by setting [focusFirstElement]="false" to tag-input-dropdown

sovlful on 20 May 2018

Hi, Guys!
It was because of the parameters I've used with custom templates and It's working fine now. I am using custom templates for both "tag-input" and "tag-input-dropdown". Thank you!

ImChamZ on 21 May 2018

As for me all works fine.

in component ts

    public validators = [ this.must_be_email ];
    public errorMessages = {
        'must_be_email': 'Enter valid email adress!'
    };
    private must_be_email(control: FormControl) {        
        var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
        if (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) {
            return { "must_be_email": true };
        }
        return null;
    }

in component html

<tag-input [ngModel]="emails"
        [errorMessages]="errorMessages" 
        [validators]="validators"
        [placeholder]="'Enter emails'" 
        [secondaryPlaceholder]="'Enter emails'">
    </tag-input>

Hope its helps you.

suer