8th-Major-commit: Added Form-Validation functionality

Author: SidP919

Angular/to_do_list/src/app/subComponents/add-to-do-item/add-to-do-item.component.html

@@ -1,13 +1,27 @@
-<form class="mb-3 text-start border border-primary border-3 rounded-3" (ngSubmit)="onSubmit()">
+<form class="mb-3 text-start border border-primary border-3 rounded-3 form-validate" (ngSubmit)="onSubmit()" novalidate>
     <div class="mb-3 ms-4 pt-2">
-      <label for="taskTitle" class="text-primary"><h5> Title: </h5></label>
-      <input type="text" class="mx-2 border border-primary border-3 bg-white rounded-3 w-50 min-vw-50" 
-        placeholder="For ex. Study" id="taskTitle" name="taskTitle" [(ngModel)]="taskTitle">
+        <label for="taskTitle" class="text-primary"><h5> Title: </h5></label>
+        <input type="text" class="mx-2 border border-primary border-3 bg-white rounded-3 w-50 min-vw-50" 
+            placeholder="For ex. Study" id="taskTitle" name="taskTitle" 
+            [(ngModel)]="taskTitle" required>
+        <div class="valid-feedback mx-2">
+            <h6>Seems fine!</h6>
+        </div>
+        <div class="invalid-feedback mx-2">
+            <h6>Please provide a valid Title</h6>
+        </div>
     </div>
     <div class="mb-3 ms-4">
         <label for="taskDescription" class="text-primary align-top"><h5>Task Description: </h5></label>
         <textarea rows="4" cols="35" id="taskDescription" name="taskDescription"
-            class="d-block mx-2 border border-primary border-3 bg-white rounded-3 w-75 min-vw-75" [(ngModel)]="taskDescription">Description of task</textarea>
+            class="d-block mx-2 border border-primary border-3 bg-white rounded-3 w-75 min-vw-75" 
+            [(ngModel)]="taskDescription" required>Description of task</textarea>
+        <div class="valid-feedback mx-2">
+            <h6>Seems fine!</h6>
+        </div>
+        <div class="invalid-feedback mx-2">
+            <h6>Please provide a valid Description</h6>
+        </div>
     </div>
     <div class="mb-3 ms-4">
         <button type="submit" class="btn btn-primary px-5 mx-2">Add task</button>

Angular/to_do_list/src/app/subComponents/add-to-do-item/add-to-do-item.component.ts

@@ -19,12 +19,40 @@ export class AddToDoItemComponent implements OnInit {
   constructor() { }
 
   ngOnInit(): void {
+    this.validateAddTodoForm();
+  }
+
+  validateAddTodoForm(): void {
+    // Fetch all the forms we want to apply custom Bootstrap validation styles to
+    const forms = document.querySelectorAll('.form-validate')
+    
+    // Loop over them and prevent submission
+    Array.prototype.slice.call(forms)
+      .forEach(function (form) {
+        form.addEventListener('submit', function (event: { preventDefault: () => void; stopPropagation: () => void; }) {
+          if (!form.checkValidity()) {
+            event.preventDefault()
+            event.stopPropagation()
+          }
+  
+          form.classList.add('was-validated')
+        }, false)
+    });
   }
 
   //Emit task details to to-do-list component:
   onSubmit(){
-    this.todo.title=this.taskTitle;
-    this.todo.desc=this.taskDescription;
-    this.addToDo.emit(this.todo);
+
+    if(this.taskTitle!== "" && this.taskDescription!== ""){
+      this.todo.title=this.taskTitle;
+      this.todo.desc=this.taskDescription;
+      this.addToDo.emit(this.todo);
+      this.taskTitle="";
+      this.taskDescription="";
+    }
+    else{
+      console.log("Add Todo Form is not filled with valid details.");
+    }
   }
+
 }