尝试设置表单但由于某种原因,我的 html 中的 Date 输入没有绑定到对象的日期值,尽管使用[1]
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[]
){
}
}
测试输出显示当前“新”Date 作为对象的值,但输入不更新 User 对象的日期值或反映该值,表明 two-way 绑定都不起作用。非常感谢帮助。
10 回答
根据 HTML5,您可以使用
input type="datetime-local"
而不是input type="date"
。它将允许
[(ngModel)]
指令从输入控件读取和写入值。**注意:**如果日期字符串包含'Z',那么为了实现上述解决方案,您需要修剪日期中的'Z'字符。
有关详细信息,请在 mozilla 文档中查看此链接。
Angular 2,4 和 5:
最简单的方法:plunker
而不是[5]你可以使用:
您也可以选择不使用 parseDate 函数。在这种情况下,日期将保存为字符串格式,如“2016-10-06”而不是日期类型(我没有尝试过,例如在操作数据或保存到数据库时是否会产生负面影响)。
在您的组件中
并在你的 HTML 中
在.ts:
.html:
Angular 2 completely ignores
type=date
. If you change type totext
you'll see that yourinput
has two-way binding.这是一个非常糟糕的建议,更好的一个遵循:
我的项目最初使用
jQuery
。所以,我现在正在使用jQuery datepicker
,希望有角度的团队能够解决原始问题。它也是一个更好的替代品,因为它有 cross-browser 支持。仅供参考,input=date
在 Firefox 中不起作用。好建议:很少有很好的
Angular2 datepickers
:https://github.com/emirdeliz/meus-projetos/tree/master/angular2-schedule/app/frontend/components/datepicker
https://github.com/MrPardeep/Angular2-DatePicker
https://www.npmjs.com/package/ng2-datepicker
如果您使用的是现代浏览器,那么这是一个简单的解决方案。
首先,将模板变量附加到输入。
然后将变量传递给接收方法。
在您的控制器中,只需将参数作为 HTMLInputElement 类型接受,并在 HTMLInputElement 上使用方法 valueAsDate。
然后,您可以在正常日期操纵日期。
您也可以像平常一样设置
<input [value]= "...">
的值。就个人而言,当有人试图坚持单向数据流时,我试图远离我的组件中的双向数据绑定。
使用DatePipe
您可以使用解决方法,如下所示:
在您的组件上:
在 Typescript - app.component.ts 文件中
在 HTML 输入字段中
它将在输入字段中显示当前日期。