validate date input
This commit is contained in:
Chneemann
parent
75b02685ec
commit
450a96d2de
3 changed files with 234 additions and 115 deletions
|
|
@ -7,125 +7,158 @@
|
|||
(ngSubmit)="onSubmit(taskForm)"
|
||||
#taskForm="ngForm"
|
||||
onsubmit="return false"
|
||||
class="content"
|
||||
>
|
||||
<div class="left-side">
|
||||
<div class="title">
|
||||
<p>Title<span class="red-dot">*</span></p>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
#title="ngModel"
|
||||
(input)="saveTaskData()"
|
||||
placeholder="{{ taskData.title }}"
|
||||
[(ngModel)]="taskData.title"
|
||||
autocomplete="off"
|
||||
required
|
||||
/>
|
||||
<div class="error-msg">
|
||||
@if (!title.valid && title.touched) {
|
||||
<p>You must enter a title.</p>
|
||||
}
|
||||
<div class="content">
|
||||
<div class="left-side">
|
||||
<div class="title">
|
||||
<p>Title<span class="red-dot">*</span></p>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
#title="ngModel"
|
||||
(input)="saveTaskData()"
|
||||
placeholder="{{
|
||||
taskData.title ? taskData.title : 'Enter a title'
|
||||
}}"
|
||||
[(ngModel)]="taskData.title"
|
||||
autocomplete="off"
|
||||
required
|
||||
/>
|
||||
<div class="error-msg">
|
||||
@if (!title.valid && title.touched) {
|
||||
<p>You must enter a title.</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>Description<span class="red-dot">*</span></p>
|
||||
<textarea
|
||||
id="description"
|
||||
rows="6"
|
||||
name="description"
|
||||
#description="ngModel"
|
||||
minlength="10"
|
||||
(input)="saveTaskData()"
|
||||
placeholder="{{
|
||||
taskData.description
|
||||
? taskData.description
|
||||
: 'Enter a description'
|
||||
}}"
|
||||
[(ngModel)]="taskData.description"
|
||||
autocomplete="off"
|
||||
required
|
||||
></textarea>
|
||||
<div class="error-msg">
|
||||
@if (!description.valid && description.touched) {
|
||||
<p>You must enter a description. (min. 10 letters)</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>Description<span class="red-dot">*</span></p>
|
||||
<textarea
|
||||
id="description"
|
||||
rows="6"
|
||||
name="description"
|
||||
#description="ngModel"
|
||||
minlength="10"
|
||||
(input)="saveTaskData()"
|
||||
placeholder="{{ taskData.description }}"
|
||||
[(ngModel)]="taskData.description"
|
||||
autocomplete="off"
|
||||
required
|
||||
></textarea>
|
||||
<div class="error-msg">
|
||||
@if (!description.valid && description.touched) {
|
||||
<p>You must enter a description. (min. 10 letters)</p>
|
||||
}
|
||||
<div class="middle-spacer"><div class="line"></div></div>
|
||||
<div class="right-side">
|
||||
<div class="date">
|
||||
<p>Due date<span class="red-dot">*</span></p>
|
||||
<input
|
||||
type="date"
|
||||
id="date"
|
||||
name="date"
|
||||
#date="ngModel"
|
||||
(input)="checkDateInput()"
|
||||
placeholder="{{ taskData.date }}"
|
||||
[(ngModel)]="taskData.date"
|
||||
autocomplete="off"
|
||||
required
|
||||
/>
|
||||
<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>
|
||||
<div class="priority">
|
||||
<p>Prio<span class="red-dot">*</span></p>
|
||||
<div class="btns">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
[ngClass]="{
|
||||
'btn-active': taskData.priority == 'urgent'
|
||||
}"
|
||||
[ngStyle]="{
|
||||
'background-color':
|
||||
taskData.priority == 'urgent' ? 'red' : 'white'
|
||||
}"
|
||||
(click)="tooglePriority('urgent')"
|
||||
>
|
||||
<div class="btn-text">
|
||||
<span>Urgent</span>
|
||||
<img src="./../../../assets/img/urgent.svg" alt="" />
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
[ngClass]="{
|
||||
'btn-active': taskData.priority == 'medium'
|
||||
}"
|
||||
[ngStyle]="{
|
||||
'background-color':
|
||||
taskData.priority == 'medium' ? 'orange' : 'white'
|
||||
}"
|
||||
(click)="tooglePriority('medium')"
|
||||
>
|
||||
<div class="btn-text">
|
||||
<span>Medium</span>
|
||||
<img src="./../../../assets/img/medium.svg" alt="" />
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
[ngClass]="{
|
||||
'btn-active': taskData.priority == 'low'
|
||||
}"
|
||||
[ngStyle]="{
|
||||
'background-color':
|
||||
taskData.priority == 'low' ? 'green' : 'white'
|
||||
}"
|
||||
(click)="tooglePriority('low')"
|
||||
>
|
||||
<div class="btn-text">
|
||||
<span>Low</span>
|
||||
<img src="./../../../assets/img/low.svg" alt="" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle-spacer"><div class="line"></div></div>
|
||||
<div class="right-side">
|
||||
<div class="date">
|
||||
<p>Due date<span class="red-dot">*</span></p>
|
||||
<input
|
||||
type="date"
|
||||
id="date"
|
||||
name="date"
|
||||
#date="ngModel"
|
||||
(input)="saveTaskData()"
|
||||
placeholder="{{ taskData.date }}"
|
||||
[(ngModel)]="taskData.date"
|
||||
autocomplete="off"
|
||||
required
|
||||
/>
|
||||
<div class="error-msg">
|
||||
@if (!date.valid && date.touched) {
|
||||
<p>You must enter a date.</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="priority">
|
||||
<p>Prio<span class="red-dot">*</span></p>
|
||||
<div class="btns">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
[ngClass]="{
|
||||
'btn-active': taskData.priority == 'urgent'
|
||||
}"
|
||||
[ngStyle]="{
|
||||
'background-color':
|
||||
taskData.priority == 'urgent' ? 'red' : 'white'
|
||||
}"
|
||||
(click)="tooglePriority('urgent')"
|
||||
>
|
||||
<div class="btn-text">
|
||||
<span>Urgent</span>
|
||||
<img src="./../../../assets/img/urgent.svg" alt="" />
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
[ngClass]="{
|
||||
'btn-active': taskData.priority == 'medium'
|
||||
}"
|
||||
[ngStyle]="{
|
||||
'background-color':
|
||||
taskData.priority == 'medium' ? 'orange' : 'white'
|
||||
}"
|
||||
(click)="tooglePriority('medium')"
|
||||
>
|
||||
<div class="btn-text">
|
||||
<span>Medium</span>
|
||||
<img src="./../../../assets/img/medium.svg" alt="" />
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
[ngClass]="{
|
||||
'btn-active': taskData.priority == 'low'
|
||||
}"
|
||||
[ngStyle]="{
|
||||
'background-color': taskData.priority == 'low' ? 'green' : 'white'
|
||||
}"
|
||||
(click)="tooglePriority('low')"
|
||||
>
|
||||
<div class="btn-text">
|
||||
<span>Low</span>
|
||||
<img src="./../../../assets/img/low.svg" alt="" />
|
||||
</div>
|
||||
</button>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue