Inputs using Angular 2’s ngModel
automatically apply style classes of .ng-valid
and .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 Component
decorator.
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; }