Exploring how to set the default value of a date type input using property binding.
Initially, I attempted to create a new date object in app.component.ts and then bind the [value] attribute of the date input to the currentDate property within app.component.ts. However, this approach did not yield the desired result.
// Form Template
<section class="container">
<div class="panel panel-default>
<div class="panel-heading">Add a Task</div<
<div class="panel-body>>
<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">
</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" [value]="currentDate">
</div>
</div>
<div class="form-group>
<div class="col-md-offset-6">
<button type="submit" class="btn btn-default">Submit your data</button>
</div>
</div>
</form>
</div>
</div>
</section>
<section class="container">
<app-task-list></app-task-list>
</section>
// App component
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
currentDate: {};
taskForm: FormGroup;
ngOnInit() {
this.taskForm = new FormGroup({
'taskTitle': new FormControl(''),
'description': new FormControl(''),
'date': new FormControl(null)
});
this.currentDate = new Date();
console.log(this.currentDate);
}
onSubmit() {
}
}