web-dev-qa-db-ja.com

Angular 2+で少なくとも1文字入力した後にのみオートコンプリートドロップダウンを表示します

Angular 2+ with angular material design を使用してオートコンプリートを実装します。オプションは、少なくとも1文字入力しない限りオプションは表示されません。

デフォルトでは、入力が空の場合でもオートコンプリートはフォーカスで切り替え可能です。そのため、この動作を変更したいと思います。

入力に値がある場合のみオプションを表示するために、mat-autocomplete要素*ngIf="inputField.value"に条件を追加しようとしましたが、エラーが返されます。

エラー：mat-autocompleteの未定義のインスタンスを開こうとしています。 matAutocompleteに渡されたIDが正しいことと、ngAfterContentInitフックの後にそれを開こうとしていることを確認してください。

また、入力フィールドの[matAutocomplete]="auto"に条件を追加しようとしましたが、エラーも返されます。

オートコンプリートオプションが表示されているとき、エレメントcdk-overlay-containerおよびmat-autocomplete-panelは</body>を閉じる前に作成され、元のコンポーネントとリンクされていないため、cssで非表示にするのが難しいことに気付きました。

それを行う方法のアイデアはありますか？

Stackblitz のコードに従ってください。

ありがとう！

angularautocompleteangular-materialangular-material2
7
Dwcps

入力したテキストの長さが0に等しい場合、フィルター関数を呼び出さないでください。

this.filteredOptions = this.myControl.valueChanges
  pipe(
     startWith(''),
     map(val => val.length >= 1 ? this.filter(val): [])
);

デモ

19
Tomasz Kula