binding the date object to date input's default value. but not working

Question

I am trying to set the default value of date type input through property binding.

First i created a new date object in app.component.ts and then bound the [value] attribute of date to the currentDate property in the app.component.ts. But it doesnt work

// 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() {

  }
}

Solution

If the date is not in the format the form/input expects, it wont show the date. You can convert the date in your component or use a pipe.

With pipe:

<form>
  <input 
      type="date" class="form-control" 
      name="currentDate" [ngModel]="currentDate | date:'yyyy-MM-dd'">
</form>

Without pipe:

Component:

currentStringDate;
constructor() {
    this.currentStringDate = new Date().toISOString().substring(0, 10);
}

HTML:

<input type="date" class="form-control" name="currentStringDate" [ngModel]="currentStringDate">

edit: Don't forget to use the name tag in your html, it needs to be the same name as the ngModel variable

Comments

[DGK]

Try using [ngModel] instead of [value], example with pipe: [ngModel] ="currentDate | date:'yyyy-MM-dd'"

[pepelearnscode]

I cannot use pipe. It has to be done without pipes

[pepelearnscode]

@Laurens can you write an answer, explaining the code please

[DGK]

Added the code, why can't you use pipes though?

[pepelearnscode]

why is it not a good idea to use [value] instead of [ngModel]

[DGK]

If it works, it works but check out this topic and the reply by Gunther: stackoverflow.com/questions/42699705/ngmodel-vs-value

[dragonfly02]

If I need to save the date selected, I need to use two way binding but when using [(ndModel)] it says expected identifier or keyword at the end of the expression [selectedDate | date:'yyyy-MM-dd'=$event]?