날짜 형식화 및 화면에 인쇄 된 각도 2 App

Question

각도 응용 프로그램에서 사용하고있는 날짜 파이프를 입력 내에서 템플릿에서 사용할 때 올바르게 구문 분석하려고합니다. 처음에는 날짜를 포맷하기 전에, 코드는 다음과 같이 보았다 :

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

그러나 그 뷰에 출력하는 것은 (이것이다 :

<input class="app-input" [readonly]="!hasAdminAccess"         
    [(ngModel)]="staff.profile.hireDate" 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을 추가했습니다.