contact form validations on submit

src/app/contact/contact.component.ts

@@ -1,6 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { CvService } from '../services/cv.service';
 import { IContact } from './contact.model';
+import { FormBuilder, FormControl, NgForm } from '@angular/forms';
 
 @Component({
   selector: 'app-contact',
@@ -8,21 +9,42 @@ import { IContact } from './contact.model';
   styleUrl: './contact.component.scss'
 })
 export class ContactComponent {
-  messageModel: IContact = {name: '', fromEmail: '', content: '' };
+  messageModel: IContact = {name: '', email: '', content: '' };
   candidateId: number = 1;
   messageSentError: boolean = false;
   messageSentSuccess: boolean = false;
+  submitted: boolean = false;
 
-  constructor(private svc: CvService){
+  constructor(private svc: CvService, private formBuilder: FormBuilder){
   }
 
-  sendMessage() :void{
-    this.messageSentError = false;
-    this.messageSentSuccess = false;
+  sendMessage(messageForm: NgForm) :void{
+    this.submitted = true;
+    if(messageForm.valid){
+      this.messageSentError = false;
+      this.messageSentSuccess = false;
 
     this.svc.sendMessage(this.messageModel, this.candidateId).subscribe({
       next: (response) => this.messageSentSuccess = response,
       error: () => this.messageSentError = true
     });
+    }
+    else{
+        this.validateAllFormFields(messageForm);
+    }
+    
+  }
+
+  validateAllFormFields(formGroup: NgForm) {          
+    Object.keys(formGroup.controls).forEach(field => {    
+      const control = formGroup.controls[field];              
+      if (control instanceof FormControl) {               
+        control.markAsTouched({ onlySelf: true });
+      } else if (control instanceof NgForm) {         
+        this.validateAllFormFields(control);             
+      }
+    });
   }
 }
+
+