Угловое 2 Дата ввода не связываясь с датой валютирования

Question

пытается получить форму настройки, но по какой-то причине, ввод даты в моем 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[] 
    ){ 

    } 
} 

Выходной результат теста показывает текущую «новую» дату как значение объекта, но вход не обновляет значение даты объекта пользователя или отражает значение, предполагая, что ни одно из двух связей не работает. Помощь будет принята с благодарностью.

Answer 1

Угловой 2 полностью игнорирует type=date. Если вы измените тип на text, вы увидите, что ваш input имеет двустороннюю привязку.

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

Здесь очень плохо советуют с более одного следовать:

Мой проект первоначально использовался jQuery. Итак, сейчас я использую jQuery datepicker, надеясь, что угловая команда исправит исходную проблему. Кроме того, это лучшая замена, поскольку она поддерживает кросс-браузер. FYI, 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

Answer 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); 
    } else { 
     return null; 
    } 
} 

Вы также можете не использовать функцию parseDate. В этом случае дата будет сохранена как строковый формат, такой как «2016-10-06» вместо типа Date (я не пробовал, имеет ли это негативные последствия при манипулировании данными или сохранении в базе данных, например).

Answer 3

Угловое 2, 4 и 5:

самый простой способ: plunker

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

Answer 4

вы можете использовать обходной путь, как это:

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

на компоненте:

@Input public date: Date, 

Answer 5

Если вы используете современный браузер, есть простое решение.

Во-первых, прикрепите переменную шаблона к входу.

<input type="date" #date /> 

Затем передайте переменную в ваш метод приема.

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

В контроллере просто принять параметр как тип HTMLInputElement и использовать метод valueAsDate на HTMLInputElement.

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

Затем вы можете манипулировать датой в любом случае, если бы вы были нормальной.

Вы также можете установить значение <input [value]= "...">, как вы, .

Лично, поскольку кто-то пытается оставаться верным однонаправленному потоку данных, я стараюсь держаться подальше от двухсторонней привязки данных к моим компонентам.

Answer 6

В компоненте

let today: Date; 

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

и в вашем HTML

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