[W8D3] (ArndtED) Adds working contactUs reactive form

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

-<p>contact-us works!</p>
+<div>
+    <div style="display:inline-block">
+    <form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
+        <div>
+            <p>Reactive Contact Us Form!</p>
+            <div>
+                <input type="text" formControlName="firstName"  class="form-control input" placeholder="First name">
+            </div>
+            <div>
+                <input type="text" formControlName="lastName" class="form-control input " placeholder="Last name">
+            </div>
+            <div>
+                <input type="email" formControlName="email"  class="form-control  input" placeholder="E-mail">
+            </div>
+            <textarea type="text" formControlName="comments" class="form-control input" placeholder=""></textarea>
+            <div>
+                <button  type="submit">Sign in</button>
+            </div>
+        </div>
+      </form>
+      <div >
+        <ngb-alert  *ngIf="showMessage" type="danger" >{{ invalidEntry }}</ngb-alert>
+      </div>
+    </div>
+</div>

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

 import { Component, OnInit } from '@angular/core';
+import { FormBuilder,Validators } from '@angular/forms';
+import { NgForm } from '@angular/forms';
 
 @Component({
   selector: 'app-contact-us',
@@ -7,9 +9,25 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ContactUsComponent implements OnInit {
 
-  constructor() { }
+	public contactForm;
+	public showMessage: boolean = false;
+	public invalidEntry = 'Invalid entry';
 
+	userName = '';
+  	email: string;
+  	password: string;
+  	textArea: string;
+
+  constructor(private formBuilder: FormBuilder) { }
   ngOnInit(): void {
+    this.contactForm = this.formBuilder.group({
+      firstName: ['', [Validators.required,Validators.pattern('^[a-zA-Z]+$')]],
+      lastName: ['',[ Validators.required,Validators.pattern('^[a-zA-Z]+$')]],
+      email: ['', [ Validators.required,Validators.pattern('[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}')]],
+      comments: ['']
+    });
+  }
+  onSubmit(){
+		return this.contactForm.valid ? alert('User form is valid!!') : alert('User form is not valid!!')
   }
-
 }

myApp/src/app/footer/footer.component.html

@@ -2,7 +2,6 @@
     <ul>
         <li>About Us</li>
         <li>Careers</li>
-        <!-- <button [routerLink]="['/england']">England</button> -->
         <li [routerLink]="['/contactUs']">Contact Us</li>
     </ul>
 </div>