Using validators to validate an email input

[imchamarac]

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.

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)

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

All

[SergeyMNet]

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.

[Gbuomprisco]

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

[sovlful]

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

[imchamarac]

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!

[gopinathrpt]

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