Angular 2 日期输入未绑定到日期值

Question

正在尝试设置表单，但出于某种原因，尽管使用了 [(ngModel)]

，我 html 中的日期输入并未绑定到对象的日期值

html:

<input type='date' #myDate [(ngModel)]='demoUser.date'/><br>

表单组件：

export class FormComponent {
    demoUser = new User(0, '', '', '', '', new Date(), '', 0, [], []);  
}

用户class：

export class User {
    constructor (
        public id: number,
        public email: string,
        public password: string,
        public firstName: string,
        public lastName: string,
        public date: Date,
        public gender: string,
        public weight: number,
        public dietRestrictions: string[],
        public fitnessGoals: string[]
    ){

    }
}

测试输出将当前 "new" 日期显示为对象的值，但输入不会更新用户对象的日期值或反映该值，这表明双向绑定均无效。将不胜感激。

Answer 1

Angular2完全忽略type=date。如果将类型更改为 text，您会看到 input 具有双向绑定。

<input type='text' #myDate [(ngModel)]='demoUser.date'/><br>

这是一个非常糟糕的建议，下面是更好的建议：

我的项目原来用的是jQuery。所以，我现在使用 jQuery datepicker，希望 angular 团队能解决原来的问题。它也是一个更好的替代品，因为它具有跨浏览器支持。仅供参考，input=date 在 Firefox 中不起作用。

好建议: 好的很少Angular2 datepickers:

Answer 2

您可以使用：

而不是 [(ngModel)]

// view
<input type="date" #myDate [value]="demoUser.date | date:'yyyy-MM-dd'" (input)="demoUser.date=parseDate($event.target.value)" />

// controller
parseDate(dateString: string): Date {
    if (dateString) {
        return new Date(dateString);
    }
    return null;
}

您也可以选择不使用parseDate函数。在这种情况下，日期将被保存为字符串格式，如“2016-10-06”，而不是 Date 类型（我没有尝试过这在操作数据或保存到数据库时是否会产生负面影响）。

Answer 3

Angular 2、4 和 5 :

最简单的方法：plunker

<input type="date" [ngModel] ="dt | date:'yyyy-MM-dd'" (ngModelChange)="dt = $event">

Answer 4

您可以使用一种变通方法，例如：

<input type='date' (keyup)="0" #myDate [(ngModel)]='demoUser.date'/><br>

在你的组件上：

 @Input public date: Date,

Answer 5

如果您使用的是现代浏览器，则有一个简单的解决方案。

首先，将模板变量附加到输入。

<input type="date" #date />

然后将变量传递给您的接收方法。

<button (click)="submit(date)"></button>

在您的控制器中，只需接受 HTMLInputElement 类型的参数并在 HTMLInputElement 上使用 valueAsDate 方法。

submit(date: HTMLInputElement){
    console.log(date.valueAsDate);
}

然后您可以像正常日期一样操纵日期。

您还可以根据需要设置 <input [value]= "..."> 的值通常会。

就个人而言，作为一个试图忠于单向数据流的人，我尽量避免在我的组件中进行双向数据绑定。

Answer 6

在你的组件中

let today: string;

ngOnInit() {
  this.today = new Date().toISOString().split('T')[0];
}

并在您的 html 文件中

<input name="date" [(ngModel)]="today" type="date" required>

Answer 7

根据HTML5，您可以使用 input type="datetime-local" 代替 input type="date".

它将允许 [(ngModel)] 指令从输入控件读取和写入值。

注意：如果日期字符串包含'Z'那么要实现上面的解决方案，你需要trim日期中的'Z'字符.

有关更多详细信息，请在 mozilla 文档上阅读此 link。

Answer 8

使用DatePipe

> // ts file

import { DatePipe } from '@angular/common';

@Component({
....
providers:[DatePipe]
})

export class FormComponent {

constructor(private datePipe : DatePipe){}

    demoUser = new User(0, '', '', '', '', this.datePipe.transform(new Date(), 'yyyy-MM-dd'), '', 0, [], []);  
}

Answer 9

在 .ts 中：

today: Date;

constructor() {  

    this.today =new Date();
}

.html:

<input type="date"  
       [ngModel]="today | date:'yyyy-MM-dd'"  
       (ngModelChange)="today = $event"    
       name="dt" 
       class="form-control form-control-rounded" #searchDate 
>

Answer 10

在打字稿中 - app.component.ts 文件

export class AppComponent implements OnInit {
    currentDate = new Date();
}

在HTML输入字段

<input id="form21_1" type="text" tabindex="28" title="DATE" [ngModel]="currentDate | date:'MM/dd/yyyy'" />

它将在输入字段中显示当前日期。

Angular 2 日期输入未绑定到日期值

Angular 2 Date Input not binding to date value

html

typescript

angular2-forms

angular