angular - 角材料 - 自动完成垫错误

Question

我将angular 6 与angular material 6.4.2 一起使用，但我无法在自动完成时正确显示错误。

我创建了一个 stackblitz 来向您展示行为，这是链接

我的目标是按预期在样式化的自动完成上显示错误。

非常欢迎所有帮助:)

先感谢您。

干杯，马塞洛

Answer 1

不幸的是，我遇到了同样的问题，我使用了带有提示的解决方法

<mat-hint *ngIf="form.get('x').hasError('error')" i18n><span class="mat-error">Please choose a X</span></mat-hint>

Answer 2

这个对我很有用：

（我用它在占位符位置的 mat-autocomplete 表单字段上显示动态错误。

如果没有错误 - 占位符保持原样）

在您的 HTML 上：

[placeholder]="isPlaceHolderShowError('myFormControlName')"

在你的 TS 上：

isPlaceHolderShowError(myFormControlName) {
if (this.form.controls[myFormControlName].invalid && this.form.controls[myFormControlName].touched) {
  return 'this is my error text'
}
return 'this is the initial placehloder'

}

Answer 3

您的输入从未处于错误状态，因此未显示错误。此处固定示例：

https://stackblitz.com/edit/angular-faykhk-f9y3zc?file=app/autocomplete-filter-example.html

我刚刚添加了required验证器来强制错误状态。如果您想应用一些自定义规则 - 编写自定义验证器。