how to create only one chip from the same word in Angular

Issue

I'm wondering if there is away to make my input to create only one chip from the same word instead of creating duplicate.

Right now user seem like they can create "apple" "APPLE" "apPPle" "aPpLe" so I'm figuring out a way not do that and always return with lowercase "apple" even if they type something with all Uppercase or Lowercase.

I just want to create only one chip for one word. any help or suggestion will be really appreciated.

I have tried all this but still not working

1. this.value = $event.target.value.toUpperCase()
    this.ngModelChange.emit(this.value)

2. event.value=event.value.toLowerCase()

3. {{ value | lowercase }}

If I can fix this, the user might able to create "apple" "apple" multiple time but later I will prevent user from imputing the same word if "apple" is already existed/created.

Here is the project that is very similiar with mine

https://stackblitz.com/edit/angular-occkra

Solution

You need to add filtering logic to select and add methods:

if ((value || '').trim()) {
  if (this.allFruits.includes(value.toLowerCase()) && !this.fruits.includes(value.toLowerCase())) {
    this.fruits.push(value.trim().toLowerCase());
  }
}

without include

if ((value || '').trim()) {
  if (this.allFruits.find((f) => f.toLowerCase() === value.toLowerCase()) && !this.fruits.find((f) => f.toLowerCase() === value.toLowerCase())) {
    this.fruits.push(value.trim().toLowerCase());
  }
}

Answered By - Xesenix