Angular

Question

我使用 Angular 文档 css 类表示 valid/invalid 输入：

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

How can I make the css be applied only to the invalid FormControl, not to the FormGroups?

Answer 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 应用。

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

Angular - Apply custom css to invalid FormControl, not FormGroup?

css

typescript

angular-forms