When the page is loaded, the date input field is automatically set to the current date. However, if the form is reset, instead of restoring the default date, the date field is cleared, as shown in the images below:
// app.component.ts
export class AppComponent implements OnInit {
currentDate: {};
taskForm: FormGroup;
taskArr: ITaskDetails[] = [];
taskObj: ITaskDetails = {
title: '',
description: '',
date: null
};
constructor(private taskSer: TaskService, private fb: FormBuilder) {
this.currentDate = new Date().toISOString().substring(0, 10);
}
reset() {
this.taskForm.reset();
}
ngOnInit() {
// Initialising the form with default value for date input through form builder instance
this.taskForm = this.fb.group({
taskTitle: ['', Validators.required],
description: [''],
date: [this.currentDate, Validators.required]
});
console.log(this.taskForm);
}
onSubmit() {
this.taskObj.title = this.taskForm.value.taskTitle;
this.taskObj.description = this.taskForm.value.description ? this.taskForm.value.description : 'N/A';
this.taskObj.date = this.taskForm.value.date;
console.log(this.taskObj);
this.taskSer.setData(this.taskObj);
console.log({ ...this.taskObj });
this.taskArr = this.taskSer.getdata();
console.log(this.taskArr);
}
// Form Template
The default value for the date input in this form template is not set through data binding. The form uses reactive form approach and sets the default value using the form builder instance.
<form class="form-horizontal" [formGroup]="taskForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title *</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="taskTitle" placeholder="Title of Task" formControlName="taskTitle" [ngClass]="{isValid: taskForm.get('taskTitle').valid, isInvalid: !taskForm.get('taskTitle').valid && taskForm.get('taskTitle').touched}">
<span class="help-block" *ngIf="!taskForm.get('taskTitle').valid && taskForm.get('taskTitle').touched">Please enter the Task Title</span>
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-2 control-label">Description *</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="description" placeholder="Enter Your Description" formControlName="description">
</div>
</div>
<div class="form-group">
<label for="date" class="col-sm-2 control-label">Date of Completion *</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="date" formControlName="date" [ngClass]="{isVaid: taskForm.get('date').valid, isInvalid: !taskForm.get('date').valid && taskForm.get('date').touched}">
<span class="help-block" *ngIf="!taskForm.get('date').valid && taskForm.get('date').touched">Please chose a date for task completion</span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-5">
<button type="submit" class="btn btn-default" [disabled]="!taskForm.valid">Submit your data</button>
<button type="button" class="btn btn-default" [disabled]="!taskForm.touched" (click)="reset()">Reset Form</button>
</div>
</div>
</form>