我想实现一个自动完成使用角度2+与angular material design的选项不应该出现,除非他们已经键入至少一个字母。
默认情况下,即使输入为空,也可以在焦点上切换自动完成,因此我要更改此行为。
我试图在mat autocomplete element*ngIf="inputField.value"上添加一个条件,以便仅在输入有值时显示选项,但它返回错误:
错误:试图打开未定义的mat-autocomplete实例。确保传递给matAutocomplete的id是正确的,并且试图在ngaftercontentinit钩子之后打开它。
另外,我试图在输入字段的[matAutocomplete]="auto"中添加一个条件,但它也返回错误。
我注意到,当显示autocomplete选项时,元素cdk-overlay-containermat-autocomplete-panel是在close</body>之前创建的,它们与原始组件没有链接,因此很难被css隐藏。
你知道怎么做吗?
请按照Stackblitz上的代码操作。
谢谢!

最佳答案

如果键入的文本长度等于0,则不要调用筛选函数。

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

Demo

08-25 05:53
查看更多