<div [formGroup]="form" class="full-width">
    <span>{{label}}</span>
    <mat-chip-list aria-label="Fish selection">
        <mat-chip selected="true" color="primary" *ngFor="let member of members"></mat-chip>
    </mat-chip-list>
    <mat-form-field *ngIf="displayInput" class="full-width">
        <input matInput type="text" [placeholder]="placeholderText" [matAutoComplete]="autoMembers"
            formControlName="membersearch" />
    </mat-form-field>
</div>

<!--自動完成-->
<mat-autocomplete #autoMembers="matAutocomplete" [displayWith]="displayUser">
    <mat-option *ngFor="let item of memberResults$ | async" [value]="item"
        (onSelectionChange)="handleMemberSelection(item)">
        {{item.name}}
    </mat-option>
</mat-autocomplete>

import { FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { Component, forwardRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-chips-list',
  templateUrl: './chips-list.component.html',
  styleUrls: ['./chips-list.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ChipsListComponent),
      multi: true
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => ChipsListComponent),
      multi: true
    }
  ]
})
export class ChipsListComponent implements OnInit, ControlValueAccessor {
  
  constructor() { }
  writeValue(obj: any): void {
    throw new Error('Method not implemented.');
  }
  registerOnChange(fn: any): void {
    throw new Error('Method not implemented.');
  }
  registerOnTouched(fn: any): void {
    throw new Error('Method not implemented.');
  }

  ngOnInit(): void {
  }

}