[Angular2 Form] Style Validation in Angular 2 Forms

Inputs using Angular 2’sngModelautomatically apply style classes of.ng-validand.ng-invalideach time the input’s validity changes. These classes allow you easily add your own styles simply by declaring thestylesin yourComponentdecorator.

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-message',templateUrl: './ponent.html',styleUrls: ['./ponent.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