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>

这有助于您应用动态类。

Answer 2

我看到这是一个古老的问题，但答案可能会有用。

创建自定义指令并使用HostBinding：

import { ContentChild, Directive, ElementRef, HostBinding } from '@angular/core';
import { FormControlName } from '@angular/forms';

@Directive({
    selector: 'div.form-group'
})
export class ParentElementValidatorDirective {
    @ContentChild(FormControlName) controlName: FormControlName;
    @HostBinding('class.ng-invalid') get invalid() { return this.controlName.invalid && this.controlName.touched; }
    @HostBinding('class.ng-valid') get valid() { return this.controlName.valid && this.controlName.touched; }
    constructor(element: ElementRef) { }
}

注意指令的选择器！

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

2 个答案: