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

【问题标题】：Angular 2 Date Input not binding to date valueAngular 2 日期输入未绑定到日期值
【发布时间】：2016-11-05 15:03:08
【问题描述】：

尝试设置表单，但由于某种原因，我的 html 中的日期输入未绑定到对象的日期值，尽管使用 [(ngModel)]

html:

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

表单组件：

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

用户等级：

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[]
    ){

    }
}

测试输出显示当前“新”日期作为对象的值，但输入没有更新用户对象的日期值或反映该值，这表明双向绑定都不起作用。非常感谢您的帮助。

【问题讨论】：

Angular2: How to use JavaScript Date Object with NgModel two way binding的可能重复

标签： html angular typescript angular2-forms

【解决方案1】：

在你的组件中

let today: string;

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

在你的 html 文件中

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

【讨论】：

typescript 将有设计时警告将字符串分配给 Date
就我而言， new Date(myDate).toISOString().split('T')[0] 有效！谢谢

【解决方案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”而不是日期类型（例如，我没有尝试过这是否会在操作数据或保存到数据库时产生负面影响）。

【讨论】：

非常感谢，用了一点零钱：(input)="demoUser.date = $event.target.valueAsDate"
在这种情况下，无法更改组件的可见日期。

【解决方案3】：

在 Typescript - 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'" />

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

使用 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, [], []);  
}

【讨论】：

【解决方案6】：

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

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

注意：如果日期字符串包含'Z'，那么要实现上述解决方案，你需要从日期中修剪'Z'字符。

有关详细信息，请通过 mozilla 文档上的 link。

【讨论】：

input type="date" 仍然有效。除 IE 和 Safari 外，所有浏览器都支持它。 type="datetime-local" 是完全不同的输入类型，Firefox 也不支持：link

【解决方案7】：

Angular 2、4 和 5：

最简单的方法：plunker

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

【讨论】：

快速而简单，但它会将本地化抛到窗外。
您的解决方案有错误。单击 x 清除日期，然后单击 mm 并开始输入以下序列：1 - 1 - 1 - 1 - 2 - 0 - 1 - 7 生成 11/11/2017，结果为：mm/dd/ 0017，而不是 2017 年 11 月 11 日
同意@alex 关于这一点。手动输入日期与此方法混淆。
它给出错误：动作表达式中不能有管道
@Saurabh，请看这个：stackoverflow.com/questions/39642882/…

【解决方案8】：

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

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

<input type="date" #date />

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

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

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

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

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

您也可以将<input [value]= "..."> 的值设置为通常会。

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

【讨论】：

【解决方案9】：

您可以使用解决方法，如下所示：

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

在你的组件上：

 @Input public date: Date,

【讨论】：

你能解释一下（keyup）在做什么吗？
angular 只更新屏幕，如果我们这样做绑定源：angular.io/guide/user-input

【解决方案10】：

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

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

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

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

好建议：有几个不错的Angular2 datepickers：

【讨论】：

仅供参考：input=date 在 Firefox 57+ 中有效，但在 IE 或 Safari 中无效。由于 IE 仍占浏览器使用率的 3% 左右，目前仍在尝试支持它有点令人头疼。