メモ代わりの記事です
やりたかったこと
Angular Material mat-form-fieldで入力補完がしたかったのでmat-autocompleteを使用した
mat-form-fieldを2つ実装して別々に入力補完したかった
失敗したこと
mat-form-fieldを2つ実装したが、1つ目の入力補完の内容が2つ目にも反映されてしまった
要約
コード一部抜粋
<input type="text"
matInput
[formControl]="control"
[matAutocomplete]="auto">
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
<input type="text"
matInput
[formControl]="otherControl"
[matAutocomplete]="auto">
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
matAutocomplete用のテンプレート変数を分ける
上記だと#autoの指定が一緒なので1つめのautocompleteの内容が反映される
テンプレート変数を分ければ正常に別々の入力補完が聞くようになる