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

Question

我有一个反应形式,每个控件都遵循这个基本结构:

<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类.

任何帮助将不胜感激!

Answer 1

<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>

这可以帮助您应用动态类。