góc 2 ngày nhập không gắn vào giá trị ngày

Question

cố gắng để có được một hình thức thiết lập nhưng đối với một số lý do, ngày đầu vào trong html của tôi không được liên kết với giá trị ngày tháng của đối tượng, mặc dù sử dụng [(ngModel)]

html:

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

dạng thành phần:

export class FormComponent { 
    demoUser = new User(0, '', '', '', '', new Date(), '', 0, [], []); 
} 

lớp User:

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

    } 
} 

Đầu ra kiểm tra cho biết ngày "mới" hiện tại làm giá trị của đối tượng, nhưng đầu vào không cập nhật giá trị ngày của đối tượng người dùng hoặc phản ánh giá trị, cho thấy cả hai liên kết hai chiều đều không hoạt động. Trợ giúp sẽ được đánh giá cao.

Answer 1

góc 2 hoàn toàn bỏ qua type=date. Nếu bạn thay đổi loại thành text, bạn sẽ thấy rằng input của bạn có liên kết hai chiều.

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

Dưới đây là lời khuyên khá xấu với một tốt hơn để làm theo:

Dự án của tôi ban đầu được sử dụng jQuery. Vì vậy, hiện tại tôi đang sử dụng jQuery datepicker, hy vọng rằng nhóm góc cạnh sẽ khắc phục vấn đề ban đầu. Ngoài ra nó là một sự thay thế tốt hơn bởi vì nó có hỗ trợ qua trình duyệt. FYI, input=date không hoạt động trong Firefox.

Tốt khuyên: Có vài khá tốt 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

Thay vì [(ngModel)] bạn có thể sử dụng:

// 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; 
    } 
} 

Bạn cũng có thể chọn không sử dụng parseDate chức năng. Trong trường hợp này, ngày sẽ được lưu thành định dạng chuỗi như "2016-10-06" thay vì Loại ngày (Tôi chưa thử điều này có hậu quả tiêu cực khi thao tác dữ liệu hoặc lưu vào cơ sở dữ liệu chẳng hạn).

Answer 3

góc 2, 4 và 5:

cách đơn giản nhất: plunker

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

Answer 4

bạn có thể sử dụng một cách giải quyết, như thế này:

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

trên thành phần của bạn:

@Input public date: Date, 

Answer 5

Nếu bạn đang sử dụng trình duyệt hiện đại, có một giải pháp đơn giản.

Trước tiên, hãy đính kèm biến mẫu vào đầu vào.

<input type="date" #date /> 

Sau đó chuyển biến vào phương thức nhận của bạn.

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

Trong điều khiển của bạn chỉ chấp nhận các thông số như kiểu HTMLInputElement và sử dụng phương pháp valueAsDate trên HTMLInputElement.

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

Sau đó, bạn có thể thao tác ngày mà bạn sẽ là một ngày bình thường.

Bạn cũng có thể đặt giá trị của số <input [value]= "..."> khi bạn bình thường.

Cá nhân, với tư cách là người cố gắng giữ đúng luồng dữ liệu một chiều, tôi cố gắng tránh xa ràng buộc dữ liệu hai chiều trong các thành phần của mình.

Answer 6

Trong thành phần của bạn

let today: Date; 

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

và trong html của bạn

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