角度 6 响应式形式添加错误类容器 div

Question

使用 Angular 6 指令或组件，当输入无效等时，将 has-error 类添加到容器div 的最简单防错解决方案是什么？

<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' : '';
}