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

Question

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

child.component.ts

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

子组件.html

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

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

有什么提示吗？

Answer 1

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

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