Validation visual feedback

Author: gopinav

reactive-forms/src/app/app.component.html

@@ -4,7 +4,7 @@ <h2>Registration Form</h2>
   <form [formGroup]="registrationForm">
     <div class="form-group">
       <label>Username</label>
-      <input type="text" formControlName="userName" class="form-control">
+      <input type="text" [class.is-invalid]="registrationForm.get('userName').invalid && registrationForm.get('userName').touched" formControlName="userName" class="form-control">
     </div>
 
     <div class="form-group">

reactive-forms/src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
 import { FormBuilder } from '@angular/forms';
+import { Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-root',
@@ -21,7 +22,7 @@ export class AppComponent {
   // });
 
   registrationForm = this.fb.group({
-    userName: [''],
+    userName: ['', Validators.required],
     password: [''],
     confirmPassword: [''],
     address: this.fb.group({