Usando Angular 2, tengo un parámetro llamado "ejemplo" que es un objeto de Fecha. En la plantilla, quiero formatear "ejemplo" con una tubería de fecha. Algo como esto:
<input type="text" [value]="example | date:'shortTime'"> // 9:00 AM Sin embargo, necesito usar las formas reactivas de Angular. FormControls tiene prioridad, por lo que formControlName anulará cualquier cosa en la directiva de value .
<input type="text" formControlName="example"> // Wed Mar 08 2017 09:00:00 GMT-0700 (MST) <input type="text" formControlName="example" [value]="example | date:'shortTime'"> // Wed Mar 08 2017 09:00:00 GMT-0700 (MST) La directiva formControlName no aceptará tuberías. ¿Cómo puedo formatear un objeto Fecha en la plantilla de un formulario reactivo?
Pseudocódigo:
@Component({ template: ` <form [formGroup]="formGroup"> Example: <input type="text" formControlName="example"> </form> ` }) export class ExampleComponent implements OnInit { public formGroup: FormGroup; public example: Date = new Date(); public ngOnInit() { this.formGroup = new FormGroup({ example: new FormControl(this.example) }); } }ACTUALIZACIÓN: me di cuenta de que un enfoque más simple y sensato usa valueChanges para realizar un setValue con una transformación de tubería en el valor del evento de cambio.
Probablemente hay algunas mejores prácticas para encontrar sobre la limpieza de suscripciones y ser eficiente si tiene muchos controles de formulario con suscripciones. También puede limpiar cualquier transformación de tubería no deseada cuando procese/envíe los valores finales del formulario.
Ejemplo básico (Ver también:fuente original ):
ngOnInit() { this.searchField = new FormControl(); this.searchField.valueChanges .subscribe(val => { this.searchField.setValue(myPipe.transform(val)) }); }Extracto con retardo de rebote + verificación de distinción (proporcionado por operadores pipeables RxJS):
this.searchField.valueChanges .pipe( // RxJS pipe composing delay + distinctness filters debounceTime(400), distinctUntilChanged() ) .subscribe(term => { this.searchField.setValue(myPipe.transform(val)) });Sugerencia original...
Esta respuesta describe cómo crear un descriptor de acceso de valor de control personalizado para un campo de entrada que inserta funciones de conversión de marca de tiempo personalizadas dentro de los métodos onChange (que obtiene la función personalizada convertTo*) y writeValue (que obtiene la función personalizada convertFrom).
Es probable que cree algo similar (por ejemplo, adapte la plantilla, etc. a otros tipos de entrada de formulario), pero reemplace las funciones de conversión con los métodos de transformación de tubería deseados (probablemente dos tipos diferentes) para lograr lo que busca. La documentación angular o el código fuente podrían ser útiles para obtener más detalles.
Creo que otros enfoques sugeridos aquí que involucran una transformación de tubería durante la creación del control de formulario inicial, son más limitados y posiblemente no sean lo que espera porque no continuará aplicando esos cambios a medida que el usuario cambia el valor de entrada. Se mostraría correctamente al principio, pero cualquier manipulación perdería el filtrado de transformación y el formulario simplemente se enviaría tal como está sin aplicar la transformación de tubería.
Es posible que me falte algo sobre cómo funcionan las otras sugerencias o específicamente lo que buscas.
¿Por qué no formatea la fecha directamente? Me gusta:
this.formGroup = new FormGroup({ example: [new Date().toISOString()] });Aquí podemos confiar en JS. Quería usar shortTime como para su canalización, por lo que la salida podría ser...
10:50 PMEntonces, cuando asigne el valor de la fecha, use esto:
this.formGroup = new FormGroup({ example: new FormControl(new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})) });... y obtendrá el tiempo que se muestra como su deseo :)
¡Aquí hay más lecturas sobre Date.prototype.toLocaleTimeString() en caso de que esté interesado!