FormControl入力内の角2の日付パイプ

私は、複数のFormControl入力フィールドを持つ動的に生成されたAngular 2 FormGroupを持っています。入力の一部はDatesで、サーバーからunixタイムスタンプとしてフェッチされます。FormControl入力内の角2の日付パイプ

私は何をしたいのです：

は、人間が読める形式にUNIXタイムスタンプを変換できるようにするには、私FormGroupが移入され、そしてまた
は、人間の表現を変換するとき形式がのUnixタイムスタンプの日付。

パート1は、このように角度の日付パイプを使用し、ややシンプルです：

this.formをFormGroupへの参照であるとthis.questionは公式のチュートリアルに基づいてカスタムラッパークラスです

<input class="form-control" [formControlName]="question.key" 
[value]="this.form.controls[this.question.key].value | date:'dd/MM/yyyy'">

パイプは常にこのように、入力値を変換しようとするための方法は動作しません日付入力を変更しようとしてい

https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

：動的なフォームについてpipe 'DatePipe'例外のInvalid引数をスローしないと入力を使用できなくなります。

明確にするため、FormGroup.patchValue() apiを使用してフォームに記入し、FormGroup.getRawValue() apiを使用してフォームデータを送信してください。

私はAngular 2の日付ピッカーコンポーネントを使用しようとしましたが、私の巨大なフォームはかなり遅くなりました。カスタム日付ピッカーやjQueryに依存するウィジェットなしでやりたいと思います。

ありがとうございます。そのようなことを行うには

出典

2017-02-15 ktsangop

一つの方法は、ControlValueAccessor

コントロールとネイティブの要素の間のブリッジを実装して、あなたの入力のためのコンポーネントを作成することです。

ControlValueAccessorは、入力コントロールを表すDOM要素に新しい値を書き込む操作を抽象化します。

詳細については、DefaultValueAccessorを参照してください。

このような何かがトリック（テストされていません）実行する必要があります。

<my-input class="form-control" [formControlName]="question.key"></my-input>

または

<my-input [(ngModel)]="myModel"></my-input>

出典

2017-02-15 15:59:08 n00dl3

：

export const DATE_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MyDateInput), multi: true }; @Component({ template:'<input #input (input)="onChange($event)" (blur)="touchCallback()" type="date" [attr.disabled]="disabled?true:null">' selector:"my-input", styles:[], providers:[DATE_VALUE_ACCESSOR] }) export class MyDateInput implements ControlValueAccessor{ @ViewChild("input") input:ElementRef; disabled=false; changeCallback=(data:any)=>{}; touchCallback=()=>{}; onChange(event){ let timestamp=this.convertToTimestamp(event.target.value); this.changeCallback(timestamp); } convertToTimestamp(formatedDate){ //TODO:implement } convertFromTimestamp(timestamp){ //TODO:implement } writeValue(obj: any){ let formatedDate=this.convertFromTimestamp(obj); this.input.nativeElement.value=formatedDate; } registerOnChange(fn: any){ this.changeCallback=fn; } registerOnTouched(fn: any){ this.touchCallback=fn; } setDisabledState(isDisabled: boolean){ this.disabled=isDisabled; } }

を、あなたはこのようにそれを使用することができるはずですありがとう、私はこのアプローチを試し、できるだけ早くあなたに戻ってきます。 – ktsangop

私は「@ Component」宣言で重要な部分を忘れてしまったことに気付きました。私はすぐに編集します。 – n00dl3

changeCallbackとtouchCallbackを初期化する必要があります。これは 'touchCallback：any =（）=> {};'以外のものです。私は他の質問がない場合、すぐにあなたの答えを受け入れます。ありがとう！ – ktsangop

FormControl入力内の角2の日付パイプ

答えて

関連する問題