Ngx-chips: How to validate only before the tag gets added

[clement911]

I need to validate that my tags are valid email addresses but I don't want to report any validation error until the user has finished typing the email (when pressing enter).
Is this possible?

[Gbuomprisco]

In theory you could use [transform], validate the email in that method, and return something falsy to reject the tag. The error messages provided by the component won't work with that though.

An example here https://github.com/Gbuomprisco/ng2-tag-input/blob/master/demo/home/home.ts#L79: if I returned undefined|falsy|null, the tag wouldn't be appended

[Gbuomprisco]

This should be doable using the onAdding hook :) Please see the examples in the demo folder

[fhanauer]

How can I show message error when onAdding fails?

If I return Observable.of([]) he shows a EmptyError on console. Can I show my custom message error?

[Gbuomprisco]

not within the component, you will need to handle that. Not sure why you're sending an empty array back, but that's definitely incorrect. You can only use a TagModel there. If there's an error filter the observable

[arturtupiassu]

Hello.

I can't get this exemple to work:

public onAdding(tag: TagModel): Observable<TagModel> {
    const confirm = window.confirm('Do you really want to add this tag?');
    return Observable
        .of(tag)
        .filter(() => confirm);
}

Whenever I click "Cancel" in the confirmation dialog, I get the following error:

ERROR
message: "no elements in sequence"
name: "EmptyError"

Using angular 4.2.4 and ngx-chips 1.5.3.

Will Appreciate any help.
Thanks in advance.

[LukeBillo]

I'm aware this is a pretty old issue, but this is still a problem. The example that @arturtupiassu has shown still errors.

@Gbuomprisco The reason you'd want to send an empty array back is if you don't want to add any tags because they are invalid (if using custom validation, not the built-in one). Is there a different way of doing this currently?

[Gbuomprisco]

An array is wrong for the simple reason the hook works on a single tag and not on the list of tags.

[Gbuomprisco]

You should try passing a custom validator to the validators and use the onValidationError hook

[JPMardelli]

@clement911 @fhanauer

So this would obviously be a hack, but I think you could leverage async validators to accomplish this. Just save off the resolve for the promise in your validator and resolve the previous one with null every time the validator is run. This will prevent it from showing the error on every keypress. Then, in the onAdding method, actually do the validation you want to do, and if it doesn't pass, use the saved resolve function with the corresponding error set to true. This should now show the error only when the use tries to enter the tag. In addition, make sure to return Observable.of(tag).filter(() => {validation boolean or false}); so that the text remains and the user can edit it

[clement911]

I recently upgrade from on old version and I'm wondering if there is still no way to only trigger validation on adding?

[Gbuomprisco]

No, but I still think you can accomplish that using hooks

[g3344]

Has anyone been able to accomplish this?