Angular - 将自定义 css 应用于无效的 FormControl，而不是 FormGroup？答案

【问题标题】：Angular - Apply custom css to invalid FormControl, not FormGroup?Angular - 将自定义 css 应用于无效的 FormControl，而不是 FormGroup？
【发布时间】：2019-10-15 17:53:42
【问题描述】：

我使用 Angular 文档 css 类来表示有效/无效输入：

.ng-valid[required], .ng-valid.required  {
    border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
    border-left: 5px solid #a94442; /* red */
}

但是当我嵌套了FormControls（在FormGroups内）：

this.form = this.fb.group({
    ies_Cabecera: this.fb.group({
        cab_DatosEstablecimiento: this.fb.group({
            cab_NIFEs: this.nifEs = this.fb.control('', Validators.required)
        })
    })
});

而cab_NIFEs 无效，我得到了这个意外行为：

css 也适用于FormGroup。

这是html：

<form [formGroup]="form" class="form" (ngSubmit)="onSubmit()">
    <div formGroupName="ies_Cabecera">
        <div formGroupName="cab_DatosEstablecimiento"  class="clear">
            <h3>Datos</h3>
            <div class="col-xs-4">
                <label>NIF Establecimiento *</label>
                <input class="form-control" type="text" [formControl]="nifEs">
            </div>
        </div>
    </div>
</form>

如何使 css 仅应用于无效的FormControl，而不是 FormGroups?

【问题讨论】：

你有formgroup的form标签吗？
使用代码@tano编辑
这个错误是因为你有一个 div 而不是一个表单标签。所以你应该把它改成form，或者把css规则改成.ng-invalid:not(div)
对不起，我也有表单标签，我正在编辑@tano
因为您已经嵌套了表单组，您还应该将 .ng-invalid:not(form):not(div) 添加到规则中。错误应该在输入字段中指出，所以你可以做到。

标签： css angular typescript angular-forms

【解决方案1】：

终于解决了应用以下css：

.form-control.ng-valid:not(form)  {
    border-left: 5px solid #42A948; /* green */
}

.form-control.ng-invalid:not(form)  {
    border-left: 5px solid #a94442; /* red */
}

这会强制元素为 FormControl 以应用 css。

【讨论】：