试图设置表单,但出于某种原因,尽管使用了[(ngModel)],但my html中的日期输入没有绑定到对象的日期值

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

    }
}

测试输出将当前"新"日期显示为对象的值,但输入不会更新用户对象的日期值或反映该值,这表明双向绑定都不起作用.非常感谢您的帮助.

推荐答案

代替[(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;
}

您也可以 Select 不使用parseDate函数.在这种情况下,日期将被保存为字符串格式,如"2016-10-06",而不是日期类型(例如,我还没有try 在处理数据或保存到数据库时,这是否会产生负面影响).

Typescript相关问答推荐

Angular -使用Phone Directive将值粘贴到控件以格式化值时验证器不工作

如何使打包和拆包功能通用?

如何使用axios在前端显示错误体

在将对象从一个对象转换成另一个对象时,可以缩小对象的键吗?

学习Angular :无法读取未定义的属性(正在读取推送)

如何在方法中正确地传递来自TypeScrip对象的字段子集?

刷新页面时,TypeScrip Redux丢失状态

常量类型参数回退类型

是否可以强制静态方法将同一类型的对象返回其自己的类?

API文件夹内的工作员getAuth()帮助器返回:{UserID:空}

打字脚本中的模块化或命名空间

如何键入并类型的函数&S各属性

使用Cypress测试从Reaction受控列表中删除项目

类型判断数组或对象的isEmpty

如何正确键入泛型相对记录值类型?

我可以使用对象属性的名称作为对象中的字符串值吗?

Typescript 确保通用对象不包含属性

当并非所有歧视值都已知时,如何缩小受歧视联盟的范围?

解析错误:DeprecationError: 'originalKeywordKind' 自 v5.0.0 起已被弃用,无法再使用

是否有解释为什么默认情况下在泛型类型上访问的属性不是索引访问