angular - 将 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-touched、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 执行此操作的 native 方法。我试图创建一个指令，将父 div 的类与控件的验证类同步，但我无法处理触摸事件以在父元素上设置 ng-touched/ng-untouched 类。

如有任何帮助，我们将不胜感激!

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>

这有助于您应用动态类。