validate date input

src/app/components/add-task/add-task.component.html

@@ -7,8 +7,8 @@
     (ngSubmit)="onSubmit(taskForm)"
     #taskForm="ngForm"
     onsubmit="return false"
-    class="content"
   >
+    <div class="content">
       <div class="left-side">
         <div class="title">
           <p>Title<span class="red-dot">*</span></p>
@@ -18,7 +18,9 @@
             name="title"
             #title="ngModel"
             (input)="saveTaskData()"
-          placeholder="{{ taskData.title }}"
+            placeholder="{{
+              taskData.title ? taskData.title : 'Enter a title'
+            }}"
             [(ngModel)]="taskData.title"
             autocomplete="off"
             required
@@ -38,7 +40,11 @@
             #description="ngModel"
             minlength="10"
             (input)="saveTaskData()"
-          placeholder="{{ taskData.description }}"
+            placeholder="{{
+              taskData.description
+                ? taskData.description
+                : 'Enter a description'
+            }}"
             [(ngModel)]="taskData.description"
             autocomplete="off"
             required
@@ -59,7 +65,7 @@
             id="date"
             name="date"
             #date="ngModel"
-          (input)="saveTaskData()"
+            (input)="checkDateInput()"
             placeholder="{{ taskData.date }}"
             [(ngModel)]="taskData.date"
             autocomplete="off"
@@ -68,6 +74,8 @@
           <div class="error-msg">
             @if (!date.valid && date.touched) {
             <p>You must enter a date.</p>
+            } @if (dateInPast && date.valid) {
+            <p>The date must be in the future</p>
             }
           </div>
         </div>
@@ -115,7 +123,8 @@
                 'btn-active': taskData.priority == 'low'
               }"
               [ngStyle]="{
-              'background-color': taskData.priority == 'low' ? 'green' : 'white'
+                'background-color':
+                  taskData.priority == 'low' ? 'green' : 'white'
               }"
               (click)="tooglePriority('low')"
             >
@@ -127,5 +136,29 @@
           </div>
         </div>
       </div>
+    </div>
+    <div class="form-buttons">
+      <input
+        class="btn-clear"
+        type="button"
+        value="Clear"
+        (click)="removeTaskData()"
+      />
+      <input
+        class="btn-submit"
+        type="submit"
+        value="Create Task"
+        [disabled]="
+          title.invalid ||
+          !taskData.title ||
+          description.invalid ||
+          !taskData.description ||
+          date.invalid ||
+          !taskData.date ||
+          !taskData.priority ||
+          dateInPast
+        "
+      />
+    </div>
   </form>
 </section>

src/app/components/add-task/add-task.component.scss

@@ -111,3 +111,56 @@ p {
 .btn:hover {
   box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
 }
+
+/*------------- SUBMIT BUTTON -------------*/
+
+.form-buttons {
+  display: flex;
+  justify-content: end;
+}
+
+.btn-submit {
+  width: 183px;
+  height: 56px;
+  padding: 12px;
+  margin: 12px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--black) !important;
+  background-color: var(--light-gray);
+  font-size: 23px;
+  font-weight: 400;
+  transition: 125ms ease-in-out;
+  &:hover:not(:disabled) {
+    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+    background-color: var(--light-blue) !important;
+    border: 1px solid var(--light-blue) !important;
+    cursor: pointer;
+  }
+  &:not(:disabled) {
+    background-color: var(--very-dark-blue) !important;
+    color: var(--white);
+  }
+  &:hover {
+    cursor: default;
+  }
+}
+
+.btn-clear {
+  width: 110px;
+  height: 56px;
+  padding: 12px;
+  margin: 12px 12px;
+  border-radius: 10px;
+  color: var(--black);
+  background-color: var(--white);
+  border: 1px solid var(--black);
+  font-size: 23px;
+  font-weight: 400;
+  transition: 125ms ease-in-out;
+  cursor: pointer;
+  &:hover {
+    color: var(--light-blue);
+    border-color: var(--light-bluek);
+    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+  }
+}

src/app/components/add-task/add-task.component.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { FormsModule, NgForm } from '@angular/forms';
+import { Component, ViewChild } from '@angular/core';
+import { FormsModule, NgForm, NgModel } from '@angular/forms';
 
 @Component({
   selector: 'app-add-task',
@@ -10,7 +10,11 @@ import { FormsModule, NgForm } from '@angular/forms';
   styleUrl: './add-task.component.scss',
 })
 export class AddTaskComponent {
+  @ViewChild('title', { static: true }) titleField!: NgModel;
+  @ViewChild('description', { static: true }) descriptionField!: NgModel;
+
   currentDate: string = new Date().toISOString().split('T')[0];
+  dateInPast: boolean = false;
 
   taskData = {
     title: '',
@@ -26,6 +30,17 @@ export class AddTaskComponent {
     }
   }
 
+  checkDateInput() {
+    const currentDateForm = this.taskData.date.replaceAll('-', '');
+    const currentDate = new Date()
+      .toISOString()
+      .split('T')[0]
+      .replaceAll('-', '');
+    currentDateForm < currentDate
+      ? (this.dateInPast = true)
+      : (this.dateInPast = false);
+  }
+
   tooglePriority(prio: string) {
     this.taskData.priority !== prio
       ? (this.taskData.priority = prio)
@@ -37,9 +52,27 @@ export class AddTaskComponent {
     localStorage.setItem('taskData', JSON.stringify(this.taskData));
   }
 
+  removeTaskData() {
+    localStorage.removeItem('taskData');
+    this.untouchedFormFields();
+    this.clearFormData();
+  }
+
+  untouchedFormFields() {
+    this.titleField.control.markAsUntouched();
+    this.descriptionField.control.markAsUntouched();
+  }
+
+  clearFormData() {
+    this.taskData.title = '';
+    this.taskData.description = '';
+    this.taskData.date = this.currentDate;
+  }
+
   onSubmit(ngForm: NgForm) {
     if (ngForm.submitted && ngForm.form.valid) {
       console.log('Send completed');
+      this.removeTaskData();
     }
   }
 }