Saltar al contenido

¿Cómo puedo configurar el valor de entrada de la fecha de mi formulario reactivo?

Solución:

Tiene dos posibilidades para establecer su fecha como valor predeterminado.

Variante 1:

Para configurar el valor de fecha predeterminado en <input> etiqueta con el tipo de fecha debe usar HTML-property value de input-tag.

Ejemplo:

<form [formGroup]="editForm2">
    <input type="date" formControlName="startDate" value="{{ post.startDate | date:'yyyy-MM-dd' }}">
    <input type="date" formControlName="endDate" value="{{ post.endDate | date:'yyyy-MM-dd' }}">
</form>

Variante 2 (recomendada):

Puede utilizar una función incorporada formatDate() en angular.

Paso 1:

Importar formatDate() de @angular/common en su archivo de componente mecanografiado.

import { formatDate } from '@angular/common';

Nota: formatDate(yourDate, format, locale) espera 3-4 parámetros.

Paso 2:

Formatee sus fechas en la definición de su grupo de formularios.

this.editForm = this.formBuilder.group({
      startDate: [formatDate(this.post.startDate, 'yyyy-MM-dd', 'en'), [Validators.required]],
      endDate: [formatDate(this.post.endDate, 'yyyy-MM-dd', 'en'), [Validators.required]]
});

Aquí está un ejemplo de trabajo: https://stackblitz.com/edit/angular-kucypd

Aquí está la documentación de la fecha del tipo de entrada: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *