Angular2 - 更改类动态

Question

我有我的组件内重复下面的代码在我的形式：

<div class="form-group row"> 
    <label class="col-sm-4 col-form-label" for="description">Description</label> 
    <input class="form-control form-control-lg" 
     id="description" 
     type="text" placeholder="..." 
     formControlName="description" 
     [ngClass]="{ 
      'form-control-warning': descriptionCtrl.untouched && descriptionCtrl.invalid, 
      'form-control-success': descriptionCtrl.valid, 
      'form-control-danger': descriptionCtrl.touched && descriptionCtrl.invalid }"> 
</div> 
... Another "blocks" with the same code 

所以，为了简化这个，我创建了以下方法：

handleClass = (control: AbstractControl): any => { 
    if (control.valid) { 
    return 'form-control-success'; 
    } else { 
    if (control.touched) { 
     return 'form-control-danger'; 
    } else { 
     return 'form-control-warning'; 
    } 
    } 
} 

模板：

[ngClass]="handleClass(control)" 

然而，这是STIL l不是我想要的，因为我需要在所有组件上创建此方法。我正在寻找一种动态执行此操作的常规方法。 PS：我的项目中的所有输入都与上面的输入具有相同的规则。

完成此操作的最佳方法是什么？我希望我的问题很清楚。

Answer 1

写指令来处理这个问题，像这样：

你的元素

@Directive({ selector: '[formValidBorders]'}) 
export class FormValidBorders implements OnChanges { 
    @Input('formValidBorders') formValue: AbstractControl; 

    constructor(private el: ElementRef) { } 

    ngOnChanges(){ 
     this.el.nativeElement.className = this.handleClass(formValue); 
    } 

    private handleClass(control: AbstractControl) { 

     if (control.valid) { 
     return 'form-control-success'; 
     } 
     else if (control.touched) { 
      return 'form-control-danger'; 
     } 
     else { 
      return 'form-control-warning'; 

     } 
    } 
} 

然后在：

<input class="form-control form-control-lg" 
     id="description" 
     type="text" placeholder="..." 
     formControlName="description" 
     [formValidBorders]="form.get('description')"> 

像这样的事情应该工作，当然是有进口。