[Angular2 Form] Style Validation in Angular 2 Forms

Inputs using Angular 2’s ngModel automatically apply style classes of .ng-validand .ng-invalid each time the input’s validity changes. These classes allow you easily add your own styles simply by declaring the styles in your Componentdecorator.

 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-message',
  templateUrl: './message.component.html',
  styleUrls: ['./message.component.css']
})
export class MessageComponent implements OnInit {

  message = "Hello";

  constructor() { }

  ngOnInit() {
  }

  onSubmit(formValue){
    console.log("formValue", JSON.stringify(formValue, null, 2))
  }
}

 

input.ng-dirty.ng-valid.ng-touched{
  border-bottom: green 2px solid;
}
input.ng-invalid.ng-dirty.ng-touched{
  border: 2px solid red;
}

 

Github