Angular - применять пользовательские CSS к недействительным FormControl, а не FormGroup?

Question

Я использую классы Angular docs 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?

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.