liant la valeur par défaut de l'objet date à la date. mais ne fonctionne pas

Question

J'essaye de placer la valeur par défaut du type de date entré par la liaison de propriété.

D'abord, j'ai créé un nouvel objet date dans app.component.ts, puis j'ai lié l'attribut [value] de la date à la propriété currentDate dans l'app.component.ts. Mais il ne fonctionne pas

// Modèle de formulaire

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

// composante App

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

    } 
} 

Answer 1

Si la date ne sont pas dans le format forme/entrée attend, il montre coutume de la date. Vous pouvez convertir la date dans votre composant ou utiliser un tube.

Avec tuyau:

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

Sans tuyau:

Composant:

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

HTML:

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

edit: N'oubliez pas d'utiliser la balise name dans votre code html, elle doit être identique à la variable ngModel