角度2日期输入不绑定到日期值

尝试设置一个表单，但由于某种原因，尽管使用了[(ngModel)] ，我的 html 中的 Date 输入并没有绑定到对象的 Date 值

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


}
}

测试输出显示当前的“ new”Date 作为对象的值，但输入不更新 User 对象的 Date 值或反映该值，表明双向绑定都不起作用。非常感谢你的帮助。

213147 次浏览
小开

角度2完全忽略 type=date。如果你改变类型为 text，你会看到你的 input有双向绑定。

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

以下是一些相当糟糕的建议，值得效仿:

我的项目最初使用 jQuery。所以，我现在使用 jQuery datepicker，希望角度团队将修复原来的问题。另外，它是一个更好的替代品，因为它具有跨浏览器的支持。顺便说一句，input=date在 火狐里不起作用。

好建议 : 很少有比较好的 Angular2 datepickers:

小开
最佳答案

你可以使用以下代替[(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 类型(例如，我还没有试过在操作数据或保存到数据库时，这是否会产生负面影响)。

小开

角2,4和5 :

最简单的方法: 活塞

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

你可以使用一个变通方法，像这样:

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

关于你的部分:

 @Input public date: Date,
小开

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

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

<input type="date" #date />

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

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

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

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

然后你可以用任何正常的方式来操纵日期。

您还可以将 <input [value]= "...">的值设置为 正常情况下。

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

小开

在你的组件里

let today: string;


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

和你的 html 文件

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

根据 HTML5，您可以使用 input type="datetime-local" 而不是 input type="date".

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

注意: 如果日期字符串包含“ Z”，那么为了实现上述解决方案，需要从日期中删除“ Z”字符。

更多细节，请通过这个 链接的 mozilla 文档。

小开

使用 日期管道

> // 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, [], []);
}
小开

在:

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

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

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


提交答案