friendly validations added

src/app/contact-us/contact-us.component.html

@@ -22,9 +22,13 @@
         </div>
       </form>
       <div >
-        <ngb-alert  *ngIf="showMessage" type="danger" >{{ invalidEntry }}</ngb-alert>
-        <div class= "invalid-text" *ngIf="showMessage">
+        <ngb-alert  *ngIf="showInvalidMessage" type="danger" >{{ invalidEntry }}</ngb-alert>
+        <!-- <div class= "invalid-text" *ngIf="showInvalidMessage">
             {{invalidEntry}}
-        </div>
+        </div> -->
+        <ngb-alert  *ngIf="showValidMessage" type="success" >{{ validEntry }}</ngb-alert>
+        <!-- <div class= "valid-text" *ngIf="showValidMessage">
+            {{validEntry}}
+        </div> -->
       </div>
 </div>
\ No newline at end of file

src/app/contact-us/contact-us.component.ts

@@ -9,8 +9,12 @@ import { Component, OnInit } from '@angular/core';
 export class ContactUsComponent implements OnInit {
 
   public userForm;
-  public showMessage: boolean = false;
-  public invalidEntry = 'Invalid entry';
+
+  public showInvalidMessage: boolean = false;
+  public invalidEntry = 'Invalid entry!';
+
+  public showValidMessage: boolean = false;
+  public validEntry = 'Valid Entry!'
 
   constructor(private formBuilder: FormBuilder) { }
   ngOnInit(): void {
@@ -24,9 +28,11 @@ export class ContactUsComponent implements OnInit {
 
   onSubmit(){
     if(this.userForm.valid){
-      alert('User form is valid!!')
+      this.showInvalidMessage = false;
+      this.showValidMessage = true;
     } else {
-      alert('User form is not valid!!')
+      this.showInvalidMessage = true;
+      this.showValidMessage = false;
     }
   }