angular - tarih nesnesini tarih girişinin varsayılan değerine bağlamak. ama çalışmıyor

Tarih türünde girdi için varsayılan değeri özellik bağlama yoluyla ayarlamaya çalışıyorum.

Önce app.component.ts içinde yeni bir tarih nesnesi oluşturdum ve ardından tarihin [value] özniteliğini app.component.ts içindeki currentDate özelliğine bağladım. Ama çalışmıyor.

// Form Şablonu

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

// Uygulama bileşeni

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

  }
}

Cevap #1

Tarih, form/giriş tarafından beklenen formatta değilse, tarih görüntülenmez. Tarihi bileşeninizde dönüştürebilir veya bir pipe kullanabilirsiniz.

Boru ile:

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

Boru olmadan:

Bileşen :

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

HTML :

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

düzenle: html’inizde isim etiketini kullanmayı unutmayın, ngModel değişkeniyle aynı isimde olması gerekir