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

时间:2018-08-08 18:53:33

标签: angular

我有一个从几个父组件调用的子组件。我不想将错误消息绑定到父级,而只显示在子级组件中。它是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>

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

有什么提示吗?

1 个答案:

答案 0 :(得分:0)

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

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