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