Angular 6反应形式添加错误类容器Div

Question

使用Angular 6指令或组件，在输入无效等情况下向容器div中添加has-error类的最简单的防错解决方案是什么。

<div class="form-group m-form__group has-error"> // add has-error here.
  <label> Email address </label>
  <input type="email" class="form-control m-input" formControlName="email">
  <span class="m-form__help"> Email is required. </span> 
</div>

Answer 1

猜测您将form用作formGroup，即：<form [formGroup]="form">

您可以通过以下方法检查电子邮件是否有误：form.get('email').invalid，当输入内容脏或被触摸时，您可能需要显示错误：

直接代码：

<div class="form-group m-form__group" [ngClass]="form.get('email').invalid && (form.get('email').dirty || form.get('email').touched)"> // add has-error here.
  <label> Email address </label>
  <input type="email" class="form-control m-input" formControlName="email">
  <span class="m-form__help"> Email is required. </span> 
</div>

更好的方式：

• 像指南一样使用访问器https://angular.io/guide/form-validation#reactive-form-validation
• 使用检查方法

例如：

 <div class="form-group m-form__group" [ngClass]="displayCssFor('email')"> // add has-error here.
      <label> Email address </label>
      <input type="email" class="form-control m-input" formControlName="email">
      <span class="m-form__help"> Email is required. </span> 
    </div>

和打字稿：

displayCssFor(field: string|Array<string>) {
    return (this.form.get(field).invalid && (form.get(field).touched || form.get(field).dirty) ) ? 'has-error' : '';
  }