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')"> 

像這樣的事情應該工作，當然是有進口。