0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

MatAutoCompleteを1つのComponentに複数実装する際に、入力補完が全て同じになってしまう

Posted at

メモ代わりの記事です

やりたかったこと
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の内容が反映される
テンプレート変数を分ければ正常に別々の入力補完が聞くようになる

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?