パイプまたはトランスフォームを反応形式値に適用する

Question

単純な反応形式を作成しています。簡単にするため、表示したいデータは日付だけです。

test.component.html

<form novalidate [formGroup]="myForm"> 
     <input type="date" formControlName="date"> 
</form> 

test.component.ts

private date: Date = Date.now(); 
ngOnInit() { 
     this.myForm = this.fb.group({ 
      date: [this.date, [Validators.required]] 
     }); 
    } 

入力タイプ=テンプレート上の日付フィールドがの形式である日付を必要と'yyyy-MM-dd'。イベントの値は、JavaScriptのDateオブジェクトです。

入力値が正しいようにテンプレートレベルでデータを変更するにはどうすればよいですか？これを行うには

一つの方法は、私のコンポーネントにDatePipeを注入し、コード内の変換を適用するには、次のようになります。私が試した何

---

date: [datePipe.transform(this.event.date, 'yyyy-MM-dd'), [Validators.required]] 

しかし、これはテンプレートの実装の詳細をコンポーネントに結びつけます。たとえば、NativeScriptテンプレートの日付のフォーマットがMM/dd/yyyyの場合はどうなりますか？ formGroupはもはや有効ではありません。

Answer 1

私は、@のn00dl3の助けを借りて、出てくることができました唯一の方法は、申し訳ありませんControlValueAccessor

import { Component, Input, ViewChild } from '@angular/core'; 
    import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; 
    import { DatePipe } from '@angular/common'; 
    import { MdInput } from '@angular/material'; 

    @Component({ 
     selector: 'md-date-input', 
     template: ` 
     <md-input [placeholder]="placeholder" 
      type="date" 
      (change)="update()" 
      [value]="dateInput"> 
     </md-input>`, 
     providers: [ 
      { provide: NG_VALUE_ACCESSOR, useExisting: DateInputComponent, multi: true }] 
    }) 
    export class DateInputComponent implements ControlValueAccessor { 
     @Input() placeholder: string; 
     @ViewChild(MdInput) mdInput: MdInput; 

     dateInput: string; 

     onChange: (value: any) => void; 

     constructor(private datePipe: DatePipe) { 
     } 

     writeValue(value: any) { 
      this.dateInput = value == null ? '' : this.datePipe.transform(value, 'yyyy-MM-dd'); 
     } 

     registerOnChange(fn: (value: any) => void) { 
      this.onChange = fn; 
     } 

     registerOnTouched(fn: (value: any) => void) { 
     } 

     update() { 
      this.onChange(this.mdInput.value ? new Date(this.mdInput.value) : ''); 
     } 
}