web-dev-qa-db-ja.com

Angular 2日付入力が日付値にバインドされていません

フォームをセットアップしようとしましたが、何らかの理由で、[（ngModel）]を使用しているにもかかわらず、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[]
    ){

    }
}

テスト出力は、オブジェクトの値として現在の「新しい」日付を明らかにしますが、入力はUserオブジェクトの日付値を更新せず、値を反映しません。どちらの双方向バインディングも機能していないことを示唆します。ヘルプをいただければ幸いです。

angulartypescriptangular2-forms
40
MoSheikh

Angular 2、4、5：

最も簡単な方法： plunker

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

[（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;
}

ParseDate関数を使用しないことも選択できます。この場合、日付は日付タイプの代わりに「2016-10-06」などの文字列形式で保存されます（データの操作時やデータベースへの保存時にこれがマイナスの結果になるかどうかは試していません）。

45
hakany

コンポーネント内

let today: Date;

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

そしてあなたのHTMLで

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

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

Angular 2はtype=dateを完全に無視します。タイプをtextに変更すると、inputが双方向バインディングを持っていることがわかります。

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

ここに、従うべきより良いものを含むかなり悪いアドバイスがあります：

私のプロジェクトはもともとjQueryを使用していました。そこで、angularチームが元の問題を解決することを期待して、今のところjQuery datepickerを使用しています。また、クロスブラウザをサポートしているため、より優れた代替品です。参考までに、input=dateはFirefoxでは機能しません。

良いアドバイス：かなり良いAngular2 datepickers：

5
Andrei Zhytkevich

HTML5に従って、input type="datetime-local"の代わりにinput type="date"を使用できます。

[(ngModel)]ディレクティブが入力制御から値を読み書きできるようにします。

注：日付文字列に「Z」が含まれている場合、上記のソリューションを実装するには、日付から「Z」文字を削除する必要があります。

詳細については、mozilla docsの link をご覧ください。

2
Shivam

最新のブラウザを使用している場合、簡単な解決策があります。

最初に、テンプレート変数を入力に添付します。

<input type="date" #date />

次に、変数を受信メソッドに渡します。

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

コントローラーでは、パラメーターをHTMLInputElement型として受け入れ、HTMLInputElementでvalueAsDateメソッドを使用します。

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

その後、通常の日付と同じように日付を操作できます。

通常どおり<input [value]= "...">の値を設定することもできます。

個人的に、一方向のデータフローに忠実であり続けようとしている人として、私はコンポーネントの双方向データバインディングから離れようとします。

0
Daniel Ashcraft

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, [], []);  
}
0
M Rameez