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

  }
}

Try using [ngModel] instead of [value], example with pipe: [ngModel] ="currentDate | date:'yyyy-MM-dd'" — DGK
– DGK, Commented Oct 5, 2017 at 10:30
@Laurens can you write an answer, explaining the code please — pepelearnscode
– pepelearnscode, Commented Oct 5, 2017 at 10:35

DGK · Accepted Answer · 2017-10-05 11:19:32Z

6

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

edited Oct 5, 2017 at 11:19

answered Oct 5, 2017 at 11:13

DGK

3,0365 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

pepelearnscode Over a year ago

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

DGK Over a year ago

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

dragonfly02 Over a year ago

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]?

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related