将Angular验证类应用于非FormControl父级

前端之家收集整理的这篇文章主要介绍了将Angular验证类应用于非FormControl父级前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个反应形式,每个控件都遵循这个基本结构:

<div class="form-group">
    <label for="vtype">Vehicle Type</label>
    <input formControlName="vtype" class="form-control" placeholder="Type"/>
</div>

Angular会自动为每个FormControl和FormGroup添加验证类,例如ng-valid,ng-touching,ng-dirty等.

出于样式目的,我还想将这些相同的类应用于控件的父div元素.例如:

<div class="form-group ng-dirty ng-touched ng-invalid">
    <label for="vtype">Vehicle Type</label>
    <input formControlName="vtype" class="form-control ng-dirty ng-touched ng-invalid" placeholder="Type"/>
</div>

我还没有找到一种用Angular来做这个的本地方法.我试图创建一个指令,将父div的类与控件的验证类同步,但我无法处理触摸的事件,以便在父元素上设置ng-touching / ng -notouched类.

任何帮助将不胜感激!

解决方法

<div class="form-group ng-dirty ng-touched ng-invalid" [class.ng-invalid]="myForm.vtype.invalid">
    <label for="vtype">Vehicle Type</label>
    <input formControlName="vtype" class="form-control ng-dirty ng-touched ng-invalid" placeholder="Type"/>
</div>

这有助于您应用动态类.

猜你在找的Angularjs相关文章