我有一个反应形式,每个控件都遵循这个基本结构:
<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>
这有助于您应用动态类.