Primeng: Chip validators

[FallenRiteMonk]

[ ] bug report => Search github for a similar issue or PR before submitting
[X] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
A chip can be a combination of any symbol sequence

Expected behavior
Pass the chip component a regex pattern according to which every chip is validated

What is the motivation / use case for changing the behavior?
This gives one the possibility to prevent for example special carecters like _ / & ...

[cagataycivici]

Not clear, please provide more details, we'll review again and reopen if necessary.

[nmobregon]

Hi @cagataycivici.
I ended up in this issue looking for a way to validate added chips and preventing the add event if the value is not valid.

For example
In my case I'd like to do something like this in order to cancel the adding event.

    <p-chips formControlName="email" (onAdd)="onAddEmail($event)"></p-chips>


    public onAddEmail($event){
        if (!StringUtils.isMailValid($event.value)){
            return false;
        }
    }

I believe @FallenRiteMonk wanted to add this logic directly wth a p-chips attribute like:

<p-chips formControlName="email" [pattern]="/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/"></p-chips>
OR
<p-chips formControlName="email" [pattern]="myEmailPattern"></p-chips>

This example is actually another way to achieve what I was trying above.

Hope I was clear.
Thanks in advance

[nmobregon]

Currently solving it this way, because the add event fires after the list was changed

    if (!StringUtils.isMailValid($event.value)){
        this.form.value.email.pop();
        this.msgs = [];
        this.msgs.push({ severity: 'warninig', detail: 'Invalid mail format.' });
    }

[epaitz]

I was also interested in a similar issue. I was thinking it would be nice to have an onAdding() event that would fire before onAdd() that would give us the opportunity to evaluate the value entered by the user and take necessary action, which could include not adding the value if its invalid in someway. Possibly setting some "cancel" value in onAdding() that when true would cause onAdd() to not fire.

We need to take the value entered by the user and apply it to a REST service and then take the value returned from that service and add a value to the chips array. Right now, nice by the time onAdd() fires the value has already been added to the list, I immediately remove the newly added value, apply it to the REST service, and then add a new value to the array based on the service response.

My two cents.

[guntram]

Dudes ;)

html:
<p-chips [(ngModel)]="additionalEmailAddresses" placeholder="Email Adresse..." [allowDuplicate]="false" (onAdd)="validateEmailAddress($event)"></p-chips>

ts:
validateEmailAddress(event: any): void { if (MyValidationLibrary.isEmailInvalid(event.value)) { this.additionalEmailAddresses.pop(); } }