首页 文章

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

提问于
浏览
38

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

  • 2

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

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

    **注意:**如果日期字符串包含'Z',那么为了实现上述解决方案,您需要修剪日期中的'Z'字符。

    有关详细信息,请在 mozilla 文档中查看此链接

  • 67

    Angular 2,4 和 5

    最简单的方法:plunker

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

    而不是[5]你可以使用:

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

  • 8

    在您的组件中

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

    并在你的 HTML 中

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

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

    Angular 2 completely ignores type=date . If you change type to text you'll see that your input has two-way binding.

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

    这是一个非常糟糕的建议,更好的一个遵循:

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

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

  • 0

    如果您使用的是现代浏览器,那么这是一个简单的解决方案。

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

    <input type="date" #date />
    

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

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

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

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

    然后,您可以在正常日期操纵日期。

    您也可以像平常一样设置<input [value]= "...">的值。

    就个人而言,当有人试图坚持单向数据流时,我试图远离我的组件中的双向数据绑定。

  • 0

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

    您可以使用解决方法,如下所示:

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

    在您的组件上:

    @Input public date: Date,
    
  • -1

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

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

相关问题