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

新手上路,请多包涵

尝试设置表单,但由于某种原因,我的 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[]
    ){

    }
}

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

原文由 MoSheikh 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 453
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”而不是日期类型(例如,我没有尝试过这是否会在操作数据或保存到数据库时产生负面影响)。

原文由 hakany 发布,翻译遵循 CC BY-SA 4.0 许可协议

角度 2、4 和 5

最简单的方法: plunker

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

原文由 El houcine bougarfaoui 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题