contact form implementation

src/app/contact/contact.component.html

@@ -16,21 +16,36 @@
 
       <h3 class="h3 form-title">Contact Form</h3>
 
-      <form action="#" class="form" data-form>
+      <form class="form" #messageForm="ngForm" (ngSubmit)="sendMessage()">
 
         <div class="input-wrapper">
-          <input type="text" name="fullname" class="form-input" placeholder="Full name" required data-form-input>
+          <div>
+            <input type="text" name="fullname" maxlength="20" #fullName="ngModel" autocomplete="off" [(ngModel)]="messageModel.name" class="form-input" placeholder="Full name" required>
+          <em class="error" *ngIf="fullName.errors?.['required'] && fullName.touched">Full name is required</em>
+          </div>
 
-          <input type="email" name="email" class="form-input" placeholder="Email address" required data-form-input>
+          <div>
+          <input type="email" name="email" email #email="ngModel" autocomplete="off" [(ngModel)]="messageModel.fromEmail" class="form-input" placeholder="Email address" required>
+          <em class="error" *ngIf="email.errors?.['email'] && email.touched">Must be a valid email format</em>
+          <em class="error" *ngIf="email.errors?.['required'] && email.touched">Email is required</em>
+          </div>
         </div>
 
-        <textarea name="message" class="form-input" placeholder="Your Message" required data-form-input></textarea>
+        <div class="text-area">
+        <textarea name="message" #message="ngModel" autocomplete="off" maxlength="500" [(ngModel)]="messageModel.content" class="form-input" placeholder="Your Message" required></textarea>
+        <em class="error" *ngIf="message.errors?.['required'] && message.touched">Message is required</em>
+        </div>
 
-        <button class="form-btn" type="submit" disabled data-form-btn>
+        <button class="form-btn" type="submit" [disabled]="messageForm.form.invalid && messageForm.form.touched">
           <i class="fa-regular fa-paper-plane"></i>
           <span>Send Message</span>
         </button>
-
+        <div class="messageSentError" *ngIf="messageSentError">
+          Message not sent. Please try again.
+        </div>
+        <div class="messageSentSuccess" *ngIf="messageSentSuccess">
+          Message sent successfully.
+        </div>
       </form>
 
     </section>