How can I set my reactive form date input value? How can I set my reactive form date input value? typescript typescript

How can I set my reactive form date input value?


You have two possibilities to set you date as default value.

Variant 1:

For setting default date value to <input> tag with type date you should use HTML-property value of input-tag.

Example:

<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>

Variant 2 (recommended):

You can use an built-in function formatDate() in angular.

Step 1:

Import formatDate() from @angular/common in you component typescript file.

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

Note: formatDate(yourDate, format, locale) expects 3-4 parameters.

Step 2:

Format your dates in definition of your form group.

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

Here is working example: https://stackblitz.com/edit/angular-kucypd

Here is documentation of input type date: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date


Try the built-in formatDate package.

import { formatDate } from '@angular/common' 

and then convert your date and set it to the datepicker control

this.yourForm.controls.controlName.setValue(formatDate(date,'yyyy-MM-dd','en'));


Another solution, a little more functional w time zone Offset, adding binding and format transformation:

.html:

<form [formGroup]="form"><input type="date" class="form-control" (change)="onMyDateChange($event)" name="myDate" formControlName="myDate" value="{{ actualDateFormGroup | date:'yyyy-MM-dd' }}" ></form>

.ts:

 actualDateFormGroup = new Date(new Date().getTime() - (new Date().getTimezoneOffset() * 60000)).toISOString().split("T")[0]; onMyDateChange(event: any) {    this.forma.patchValue({ myDate: event.target.value });  }

Then you can modify the format obtained in the myDate variable as needed in the code.

For example: 2019-10-13 to 20191013

 stringFormat(string){  let date = fechaString.replace(/-/g, '');  return date;  }finalDate = stringFormat(myDate);