动态将类应用于角度定制表单组件

时间:2018-07-05 15:16:52

标签: css angular

我有一个自定义表单组件,我将动态地向其应用类。

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>

class is-valid或is-invalid将应用于应用程序文本控件容器html,而不是内部输入控件。有没有办法将在父级中设置的ng-class类推广给子级html?

我希望能够将类动态地附加到自定义组件内控件上的html上,如果可能的话,最好使用ngClass指令。我是否必须编写一个自定义属性(例如[myNgClass] = ....)才能在我的父自定义表单控件上使用?

1 个答案:

答案 0 :(得分:1)

不确定这是最好的方法,但是您可以这样:

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

在子组件内部,您将拥有这些isvalidisinvalid属性,可以与ngClass一起使用。