角材料-自动填充垫错误

Question

我将angular 6与angular material 6.4.2结合使用，并且在自动完成时无法正确显示错误。

我已经创建了一个堆栈闪电来向您显示行为，这是link

我的目标是按预期显示自动完成风格的错误。

非常感谢所有帮助：）

谢谢。

干杯， 马塞洛

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验证器来强制错误状态。如果要应用一些自定义规则，请编写自定义验证器。