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

发布时间：2020-12-17 18:06:11 所属栏目：安全来源：网络整理

导读：我有一个反应形式,每个控件都遵循这个基本结构： div class="form-group" label for="vtype"Vehicle Type/label input formControlName="vtype" class="form-control" placeholder="Type"//div Angular会自动为每个FormControl和FormGroup添加验证类,例如ng-

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

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

这有助于您应用动态类.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!