Динамически применять классы к угловому компоненту пользовательской формы

Question

У меня есть пользовательский компонент формы, и я хотел бы динамически применять классы к нему.

import { Component, forwardRef, Injector } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { BaseInput } from './base-input';

@Component({
  selector: 'app-text-control',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => TextControlComponent),
    multi: true
  }],
  styles: [':host { display: inline-block }'],
  template: `
    <ng-container *ngIf="ctx.isEditing">    
    <input class="form-control"
    [value]="value"
    (change)="value=$event.target.value" (keyup)="value=$event.target.value" >
    </ng-container>
    <ng-container *ngIf="!ctx.isEditing">    
    {{value}}
    </ng-container>
  `
})
export class TextControlComponent extends BaseInput<string> implements ControlValueAccessor {
  constructor(injector: Injector) {
    super(injector);
  }
}

Проблема в том, что когда я применяю классы начальной загрузки к компоненту в html, контейнер применяет классы, а не дочерний элемент html

 <app-text-control formControlName="test" [ngClass]="{
        'is-valid' : test.valid && (test.dirty || test.touched)  ,
        'is-invalid' : test.invalid && (test.dirty || test.touched)  
      }" ></app-text-control>

класс is-valid или is-invalid применяется к html контейнера app-text-control, а не к внутреннему элементу управления вводом. Есть ли способ распространения классов ng-классов, которые установлены в родительском элементе, на дочерний html?

Я хочу иметь возможность динамически прикреплять классы к html в элементе управления внутри моего пользовательского компонента, в идеале, если возможно, с использованием директивы ngClass. Должен ли я написать собственный атрибут (например, [myNgClass] = ....), чтобы он работал на моем родительском элементе управления пользовательской формы?

Answer 1

Не уверен, что это лучший способ сделать это, но вы могли бы сделать это следующим образом:

<app-text-control formControlName="test" [isvalid]="test.valid && (test.dirty || test.touched)" [isinvalid]="test.invalid && (test.dirty || test.touched)" ></app-text-control>

И внутри дочернего компонента у вас будут эти isvalid и isinvalid свойства, которые вы можете использовать с ngClass.