【Angular】 Material MatChipsのChips

Angular MaterialのMat-chipsについての小ネタです。

■ Angular Materialとは

Angular Materialとは、Angular専用のコンポーネントライブラリです。
導入することで、簡単にアプリケーションにマテリアルデザインといった、ユーザーが直感的に操作できるアニメーションを適用することができます。

・ 公式ドキュメント： https://material.angular.io/

■ Mat-chipsとは

Mat-chipsはAngular Materialの入力フォームの一つで楕円形のコンテナに値を表示させ、削除、入力、選択を行うことができます。より直感的に値を入力することが可能になります。

■ 公式ドキュメント

下記公式ドキュメントのコードを参照します。

<mat-form-field appearance="fill">
  <mat-label>Favorite Fruits</mat-label>
  <mat-chip-list #chipList>
    <mat-chip
      *ngFor="let fruit of fruits"
      (removed)="remove(fruit)">
      {{fruit}}
      <button matChipRemove>
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-chip>
    <input
      placeholder="New fruit..."
      #fruitInput
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
</mat-form-field>

import { ENTER } from '@angular/cdk/keycodes';
import { Component, ElementRef, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { MatChipInputEvent } from '@angular/material/chips';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';


@Component({
  selector: 'chips-autocomplete-example',
  templateUrl: 'chips-autocomplete-example.html',
  styleUrls: ['chips-autocomplete-example.css'],
})
export class ChipsExample {

  separatorKeysCodes: number[] = [ENTER];
  fruitCtrl = new FormControl();
  fruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];

  @ViewChild('fruitInput') fruitInput: ElementRef<HTMLInputElement>;

  constructor() {}

  add(event?: MatChipInputEvent): void {
    const value = (event.value || '').trim();

    // 値が入力された場合、値を格納する。
    if (value) {
      this.fruits.push(value);
    }

    // 入力した値をクリアにする。
    event.chipInput!.clear();

    // フォームに値を格納する。
    this.fruitCtrl.setValue(null);
  }

  // mat-chipの中身を削除する。
  remove(fruit: string): void {
    const index = this.fruits.indexOf(fruit);

    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }
}

1. フォームに入力された文字を小文字に設定する。

フォームに入力された文字が大文字であった場合に小文字に自動で変換してくれるように設定を行いたい場合、「event.value」に値が格納されているため、そこにtoUpperCaseメゾットを適用させます。

const value = (event?.value || '').toUpperCase().split(',').trim();

2. 同じ値が入力された場合、自動で値を消えるように設定する。

例えば、フォームに「　Lemon」が既に入力されており、再度「Lemon」を入力した場合、indexOfメゾットを使用して、値が自動で削除される様に設定することが出来ます。

  add(event?: MatChipInputEvent): void {
    const value = (event.value || '').trim();
    
    // 下記コードを追加。
    if(this.fruits.indexOf(value) >= 0) {
       continue; 
    }

    if (value) {
      this.fruits.push(value);
    }
    ・
    ・
    ・
  }

3. カンマ（,）区切りで値を入力できる様にしたい。

separatorKeysCodesの設定を変更することで、「Lemon,Apple,Limo」と入力した場合、カンマ（,）区切りでそれぞれフォームに値を入力することができます。separatorKeysCodesは値を入力した際に出力されるchipEnd Eventをベースにキーコードのイベントを出力してくれます。デフォルトはEnterのみとなっています。

import { ENTER, COMMA } from '@angular/cdk/keycodes';
・
・
・
readonly separatorKeysCodes = [ENTER, COMMA];

これでカンマの場合でも値が入力される様になります。それ以外にもSlashやSingle_quoteなど色々ありますので調べてみると面白いかもしれません。

以上です。