Application d'une canalisation ou transformation en valeur de forme réactive

Question

Je construis une forme réactive simple. Pour simplifier, disons que les seules données que je veux afficher sont des dates.

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]] 
     }); 
    } 

Le type d'entrée = champ de date sur le modèle nécessite la date à être au format de 'aaaa-MM-jj'. La valeur dans event est un objet JavaScript Date. Comment puis-je modifier les données au niveau du modèle de sorte que la valeur d'entrée est correcte?

---

Ce que j'ai essayé:

Une façon de faire serait d'injecter le DatePipe dans mon composant et appliquer la conversion en code.

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

Mais cela lie les détails d'implémentation du modèle au composant. Par exemple, que se passe-t-il si un modèle NativeScript nécessite que la date soit au format MM/dd/yyyy? Le formGroup n'est plus valide.

Answer 1

La seule façon que je suis en mesure venir, avec l'aide de @ n00dl3 est d'envelopper le composant md-entrée et fournir la valeur correcte via un 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) : ''); 
     } 
}