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

然而，这仍然不是我想要的，因为我需要在所有组件上创建此方法。我正在寻找动态执行此操作的一般方法。

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

这样的事情应该有效，当然还有进口。

Angular2 - 动态更改类

1 个答案: