working contact us page form

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

 <p>contact-us works!</p>
+
+<div>
+    <div style="display:inline-block">
+    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
+        <div>
+            <p>reactive</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>
+            <div>
+                <textarea type="text" formControlName="message" class="form-control input" placeholder="Enter your message here."></textarea>
+            </div>
+
+            <button  type="submit">Contact Us</button>
+        </div>
+      </form>
+      <div >
+        <ngb-alert  *ngIf="showMessage" type="danger" >{{ invalidEntry }}</ngb-alert>
+        <div class= "invalid-text" *ngIf="showMessage">
+            {{invalidEntry}}
+        </div>
+      </div>
+</div>
\ No newline at end of file

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

+import { FormBuilder, Validators } from '@angular/forms';
 import { Component, OnInit } from '@angular/core';
 
 @Component({
@@ -7,9 +8,27 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ContactUsComponent implements OnInit {
 
-  constructor() { }
+  public userForm;
+  public showMessage: boolean = false;
+  public invalidEntry = 'Invalid entry';
 
+  constructor(private formBuilder: FormBuilder) { }
   ngOnInit(): void {
+    this.userForm = 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,}')]],
+      message: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(200)]]
+    });
   }
 
+  onSubmit(){
+    if(this.userForm.valid){
+      alert('User form is valid!!')
+    } else {
+      alert('User form is not valid!!')
+    }
+  }
+  
+
 }