[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, ))

  }

}

input.ng-dirty.ng-valid.ng-touched{

  border-bottom: green 2px solid;

}

input.ng-invalid.ng-dirty.ng-touched{

  border: 2px solid red;

}