Angular2 - Changing classes dynamically

Question

I have the following code repeatedly in my forms within my components:

<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

So, in order to simplify this, I've created the following method:

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

In template:

[ngClass]="handleClass(control)"

However this is still not what I want, since I need to do create this method on all components. I'm looking for a general way to do this dynamically.

PS: All inputs in my project have the same rule as the input above.

What's the best way to accomplish this? I hope my question was clear enough.

learn about directives, it is a powerful way to manipulate dom element.So you will basically get the dom elements and do whatever you want to do. (angular.io/docs/ts/latest/guide/attribute-directives.html) — pritesh
– pritesh, Commented Mar 2, 2017 at 4:07

chrispy · Accepted Answer · 2017-03-02 06:08:37Z

3

Write a directive to handle this, like so:

@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';

      }
    }
}

Then on your element:

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

Something like this should work, with imports of course.

edited Mar 2, 2017 at 6:08

answered Mar 2, 2017 at 4:54

chrispy

3,6321 gold badge14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Aluan Haddad Over a year ago

Remove the return type annotation please, any is absolutely wrong here. Also, this doesn't make any sense since you are not doing anything with the result.

chrispy Over a year ago

@AluanHaddad I accidently saved the wrong copy of the answer, the updated answer is in place.

Aluan Haddad Over a year ago

You are using a return type of any, what are you returning? (hint the compiler knows best if you let it do its job)

chrispy Over a year ago

Oh! Sorry, I copied that from his question. That doesn't need a return type.

Aluan Haddad Over a year ago

Right, it is often best to let it infer the type in the other case too. It is always better than using any. So in either case you can leave off the return type which, incidentally, is void in your updated answer.

|

Collectives™ on Stack Overflow

Angular2 - Changing classes dynamically

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related