Angular 未键入的角度窗体输入验证类

有一些用于角度形式的CSS输入验证类，它们是原始的脏的和无效的。我有一个最小长度的输入，我不希望在此场景中显示错误消息：

用户选择/聚焦输入

不在其中键入任何内容就将其对焦

重新聚焦输入并开始键入，错误消息立即显示“未达到最小长度”

---

用户可以集中输入内容，决定不输入任何内容，稍后再返回。当用户输入内容时，错误消息会立即显示。

我使用angular doc的示例创建了这个简短版本，该示例要求最小长度为8，但在用户开始输入之前不会显示错误。检查这是否是您正在寻找的案例

html:

名称
名称应至少为8个字符

我对此进行了一段时间的研究，我认为你是正确的，你不能用被动形式给你的东西把这种行为从盒子里拿出来。但是，您可以创建一个绑定到新类的指令，该指令将允许您按照所需的方式设置样式

创建一个指令，用于侦听

FormControl

上的

Blur

事件，并在事件发生时检查字段是否无效。如果是，您可以设置自己的类，然后根据该类创建样式

例子：

@指令({
选择器：“[formControl]”，
})
导出类验证StatusDirective{
isValidated=false；
构造函数（私有el:ElementRef）{}
@HostBinding（'class.ng validated'）get ngValidated（）{返回this.isValidated；}
@HostBinding（'class.ng unvalidated'）get ngUnvalidated（）{return！this.isValidated；}
@HostListener（'blur'）validationStatusChanged（）{
如果（！this.isvalidate）&&
this.el.nativeElement.classList.contains（'ng-invalid'）&&
this.el.nativeElement.value.length>0）{
this.isValidated=true；
}
}
}

然后，当输入同时为

ng invalid

和

ng validated

时，您不必修改HTML，只需设置样式即可

供参考：

风格：

input.ng-invalid.ng-validated{
边框颜色：红色；
背景颜色：粉红色；
}

---

我想pristine就是我要找的，可以删除这个问题是的，pristine和dirty就是为了这个，你可以在这里找到一些例子，实际上pristine并不能真正用于解决这个场景的问题，我会保留这个问题为什么不，如果我可以问的话？如果用户聚焦的是

触摸过的

，但仍然是

原始的

，只有当用户键入某个内容时，它才会是

脏的

！似乎符合您列出的情况。一旦用户输入，它将不再是原始的，我已经更新了问题，它应该更有意义

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
   <div class="form-group">
     <label for="name">Name</label>
    <input type="text" class="form-control" id="name"
           minlength="8"
           [(ngModel)]="model.name" name="name"
           #name="ngModel">
    <div [hidden]="name.valid || name.pristine"
         class="alert alert-danger">
      Name should be at least 8 characters
    </div>
  </div>
 <!-- - -->
</form>