日付を書式設定し、角2のアプリケーションでスクリーンに印刷

Question

私は角度アプリケーションで使用している日付パイプを入力内のテンプレートで使用するときに正確に解析しようとしています。最初は、日付をフォーマットする前に、コードはこのように見えた：

<input class="app-input" [readonly]="!hasAdminAccess"         
    [(ngModel)]="staff.profile.hireDate" placeholder="None" 
    [field-status]="getPropertyStatus('profile.hireDate')"/> 

私は日付のパイプを得ている最も近いがこれです：

<input class="app-input" 
{{ staff.profile.hireDate | date:'shortDate' }} placeholder="None" 
[field-status]="getPropertyStatus('profile.hireDate')"/> 

しかし、どのようなことがビューに印刷しすること（これです文字通りこの）：

：今

> <input class="app-input" 3/18/2014 placeholder="None" 
> [field-status]="getPropertyStatus('profile.hireDate')"/> 

、あなたはそれがこの作るために、正しくフォーマットされた日付がある（と日付の変換が正常に起こっていることに気づくでしょう

3/18/2014 

しかし、私は残りの部分は（明らかに）望んでいません。印刷する日付を取得するために、ここで構文を書き直すにはどうすればよいですか？私はそれを見つめて、少し微調整を試みましたが、まだそれを働かせることができませんでした。

Answer 1

typescriptおよびngModelChangedプロパティのgetおよびset関数を使用して、ngModelを設定した後に変更することができます。

コンポーネントテンプレート：

<input class="app-input" [(ngModel)]="hireDate" (ngModelChange)="dateChanged($event)"/> 

コンポーネントクラス：

import { Component } from '@angular/core'; 
import { DatePipe } from '@angular/common'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <button (click)="setDate()">Set Date</button> 
     <input class="app-input" readonly="true" [(ngModel)]="hireDate" (ngModelChange)="dateChanged($event)" placeholder="None"/> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    staff: any; 
    myDate: any; 
    private _hireDate; 

    dateChanged(value) { 
    this.hireDate = this.datePipe.transform(value, 'shortDate'); 
    } 

    set hireDate(value) { 
    this._hireDate = this.datePipe.transform(value, 'shortDate'); 
    } 

    get hireDate() { 
    return this._hireDate; 
    } 

    setDate() { 
    this.hireDate = '10-03-1993'; 
    } 

    constructor(private datePipe: DatePipe) { 
    } 
} 

入力の値が設定されるたび入力が変化すると、それはUXの問題などが発生する場合がありますので、ユーザは彼の好ましい日付を入力することができなくなる。この問題を回避するには、ユーザーが日付を入力したときに日付変更関数を呼び出すことがあります。 （例えば、ボタンをクリックすることによって）。

私はset関数とget関数がクラス変数に対してのみ機能すると信じています。あなたの場合、オブジェクトプロパティがあります。以下に示すようにセット機能を変更すると機能します。

set hireDate(value) { 
    this._hireDate = this.datePipe.transform(value, 'shortDate'); 
    this.staff.profile.hireDate = this._hireDate; 
    } 

さらに、plunkr hereも追加しました。