привязка объекта даты к значению по умолчанию ввода даты. но не работает

Я пытаюсь установить значение по умолчанию для ввода типа даты через привязку свойства.

Сначала я создал новый объект даты в app.component.ts, а затем привязал атрибут даты [value] к свойству currentDate в app.component.ts. Но это не работает

// Шаблон формы

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

// Компонент приложения

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

  }
}

typescript angular forms ecmascript-6 angular-forms
person pepelearnscode    schedule 05.10.2017    source источник
comment
Попробуйте использовать [ngModel] вместо [value], пример с каналом: [ngModel] =currentDate | дата: 'гггг-ММ-дд'   -  person Laurens    schedule 05.10.2017
comment
Я не могу использовать трубу. Это должно быть сделано без труб   -  person pepelearnscode    schedule 05.10.2017
comment
@Laurens, не могли бы вы написать ответ, объяснив код, пожалуйста?   -  person pepelearnscode    schedule 05.10.2017
comment
Добавил код, но почему нельзя использовать пайпы?   -  person Laurens    schedule 05.10.2017

Ответы (1)


arrow_upward
6
arrow_downward

Если дата не соответствует формату, ожидаемому формой/вводом, дата не будет отображаться. Вы можете преобразовать дату в свой компонент или использовать канал.

С трубой:

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

Без трубы:

Составная часть:

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

HTML:

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

edit: не забудьте использовать тег имени в своем html, он должен совпадать с именем переменной ngModel.

person Laurens    schedule 05.10.2017
comment
почему не рекомендуется использовать [value] вместо [ngModel] - person pepelearnscode; 05.10.2017
comment
Если это работает, это работает, но проверьте эту тему и ответ Гюнтера: stackoverflow.com/questions/42699705/ngmodel -против-значения - person Laurens; 05.10.2017
comment
Если мне нужно сохранить выбранную дату, мне нужно использовать двустороннюю привязку, но при использовании [(ndModel)] он говорит expected identifier or keyword at the end of the expression [selectedDate | date:'yyyy-MM-dd'=$event]? - person stt106; 06.02.2021