在 .valid 和 .touched 子组件上显示字段错误消息答案

【问题标题】：display field error message on .valid and .touched on child component在 .valid 和 .touched 子组件上显示字段错误消息
【发布时间】：2018-08-09 04:03:10
【问题描述】：

我有这个从几个父组件调用的子组件。我不想将错误消息绑定到父组件，而只是显示在子组件中。它是角度 5 btw

child.component.ts

              item_brand = new FormControl('',
               [Validators.required]);
              item_quantity=new FormControl('',
               [Validators.required,Validators.pattern('^[0-9]+(\.[0-9]{0,3})?$')]);

child.component.html

      <input formControlName="item_brand">
                     <div class="alert" *ngIf="!item_brand.valid && item_brand.touched">Enter brand name or NA</div>

它不会显示任何错误，并且在输入品牌名称之前不会激活父表单的提交按钮，但不会显示错误消息。如果输入，表单也会得到正确处理。

有什么建议吗？

【问题讨论】：

标签： angular

【解决方案1】：

您可以在下面添加此代码。

<div *ngIf="item_brand.dirty && item_brand.errors && (item_brand.hasError('required') || item_brand.hasError('pattern'))">Enter brand name or NA</div>

【讨论】：

谢谢，但它不起作用，只是好奇：hassError 如何与正则表达式验证一起工作？
您的表单控件仅包含“必需”验证
是的，是的。我在示例中显示了所需的内容。我有其他控件具有自定义验证的名称（例如 dateBeforeToday）和带有 Validators.pattern 的 reg 表达式模式。如果您的解决方案对我有用，我将如何将 hasError 与 Validators.pattern 一起使用？
现在检查一下 Suresh