title: How can I stop adding new values as well as duplicate values in angular mat-chips?
body: <p>I am using angular 9 mat-chips and I wish to know how can I stop adding new values in the input and only allow the the items to be added which are in autocomplete list i.e typing 'abc' which is not in the autocomplete list and pressing enter adds 'abc as a chip' in the input which needs to be avoided only values which are in the autocomplete list should be added. Also, I wish to know how can I stop adding duplicates in angular mat-chips i.e if I've already added lemon lemon should not get added to the mat-chips list and should get deleted from autocomplete list as well.</p>
  <p>Following is the code:</p>
  <p><strong>chip-autocomplete.component.ts</strong></p>
  <pre><code>@Component({
    selector: 'chips-autocomplete-example',
    templateUrl: 'chips-autocomplete-example.html',
    styleUrls: ['chips-autocomplete-example.css'],
  })
  
  export class ChipsAutocompleteExample {
    visible = true;
    selectable = true;
    removable = true;
    separatorKeysCodes: number[] = [ENTER, COMMA];
    fruitCtrl = new FormControl();
    filteredFruits: Observable&lt;string[]&gt;;
    fruits: string[] = ['Lemon'];
    allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];
  
    @ViewChild('fruitInput') fruitInput: ElementRef&lt;HTMLInputElement&gt;;
    @ViewChild('auto') matAutocomplete: MatAutocomplete;
  
    constructor() {
      this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
          startWith(null),
          map((fruit: string | null) =&gt; fruit ? this._filter(fruit) : this.allFruits.slice()));
    }
  
    add(event: MatChipInputEvent): void {
      const input = event.input;
      const value = event.value;
  
      // Add our fruit
      if ((value || '').trim()) {
        this.fruits.push(value.trim());
      }
  
      // Reset the input value
      if (input) {
        input.value = '';
      }
  
      this.fruitCtrl.setValue(null);
    }
  
    remove(fruit: string): void {
      const index = this.fruits.indexOf(fruit);
  
      if (index &gt;= 0) {
        this.fruits.splice(index, 1);
      }
    }
  
    selected(event: MatAutocompleteSelectedEvent): void {
      this.fruits.push(event.option.viewValue);
      this.fruitInput.nativeElement.value = '';
      this.fruitCtrl.setValue(null);
    }
  
    private _filter(value: string): string[] {
      const filterValue = value.toLowerCase();
  
      return this.allFruits.filter(fruit =&gt; fruit.toLowerCase().indexOf(filterValue) === 0);
    }
  }
  </code></pre>
  <p><strong>chip-autocomplete.component.html</strong></p>
  <pre><code>&lt;mat-form-field class=&quot;example-chip-list&quot;&gt;
    &lt;mat-chip-list #chipList aria-label=&quot;Fruit selection&quot;&gt;
      &lt;mat-chip
        *ngFor=&quot;let fruit of fruits&quot;
        [selectable]=&quot;selectable&quot;
        [removable]=&quot;removable&quot;
        (removed)=&quot;remove(fruit)&quot;&gt;
        {{fruit}}
        &lt;mat-icon matChipRemove *ngIf=&quot;removable&quot;&gt;cancel&lt;/mat-icon&gt;
      &lt;/mat-chip&gt;
      &lt;input
        placeholder=&quot;New fruit...&quot;
        #fruitInput
        [formControl]=&quot;fruitCtrl&quot;
        [matAutocomplete]=&quot;auto&quot;
        [matChipInputFor]=&quot;chipList&quot;
        [matChipInputSeparatorKeyCodes]=&quot;separatorKeysCodes&quot;
        (matChipInputTokenEnd)=&quot;add($event)&quot;&gt;
    &lt;/mat-chip-list&gt;
    &lt;mat-autocomplete #auto=&quot;matAutocomplete&quot; (optionSelected)=&quot;selected($event)&quot;&gt;
      &lt;mat-option *ngFor=&quot;let fruit of filteredFruits | async&quot; [value]=&quot;fruit&quot;&gt;
        {{fruit}}
      &lt;/mat-option&gt;
    &lt;/mat-autocomplete&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <p><strong>app.component.html</strong></p>
  <pre><code>&lt;div class=&quot;mat-app-background basic-container&quot;&gt;
    &lt;chips-autocomplete-example&gt;loading&lt;/chips-autocomplete-example&gt;
  &lt;/div&gt;
  </code></pre>
  <p>A stackblitz similar to this code(from angular material design) can be found at: <a href="https://stackblitz.com/angular/gdjdrkxaedv?file=src%2Fapp%2Fchips-autocomplete-example.ts" rel="nofollow noreferrer">https://stackblitz.com/angular/gdjdrkxaedv?file=src%2Fapp%2Fchips-autocomplete-example.ts</a></p>