0

Using reactive-forms sample application I have added curr_date form control which has a pipe to format the date in desired format. In ts file, form group has the curr_date property which has preset value in different format.

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
  <label for="first-name">First Name: </label>
  <input id="first-name" type="text" formControlName="firstName" required>

  <label for="last-name">Last Name: </label>
  <input id="last-name" type="text" formControlName="lastName">

  <label for="zip">Date: </label>
**  <input id="curr_date" type="text" formControlName="curr_date" [value]="profileForm.value.curr_date | date: 'MM/dd/yyyy'">**

  <div formGroupName="address">
    <h2>Address</h2>

    <label for="street">Street: </label>
    <input id="street" type="text" formControlName="street">

    <label for="city">City: </label>
    <input id="city" type="text" formControlName="city">

    <label for="state">State: </label>
    <input id="state" type="text" formControlName="state">

    <label for="zip">Zip Code: </label>
    <input id="zip" type="text" formControlName="zip">
  </div>

  <div formArrayName="aliases">
    <h2>Aliases</h2>
    <button type="button" (click)="addAlias()">+ Add another alias</button>

    <div *ngFor="let alias of aliases.controls; let i=index">
      <!-- The repeated alias template -->
      <label for="alias-{{ i }}">Alias:</label>
      <input id="alias-{{ i }}" type="text" [formControlName]="i">
    </div>
  </div>


  <p>Complete the form to enable button.</p>
  <button type="submit" [disabled]="!profileForm.valid">Submit</button>
</form>

<hr>

<p>Form Value: {{ profileForm.value | json }}</p>

<p>Form Status: {{ profileForm.status }}</p>

<button type="button" (click)="updateProfile()">Update Profile</button>

In ts file, I have added curr_date formcontrol as follows:

export class ProfileEditorComponent {
  profileForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: [''],
    curr_date: ['2008-03-28T00:00:00', Validators.required],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: [''],
    }),
    aliases: this.fb.array([
      this.fb.control('')
    ])
  });

Here is what I noticed,

The element has FormControlName attribute and the date is not formatted as per date pipe

FormControlName attribute is removed from element and the date is now formatted as per date pipe

Any help to resolve this issue is highly appreciated. Thanks!

Ajit_S
  • 3
  • 2

1 Answers1

0

Might be super easy

<input id="curr_date" type="text" ...

change that to

<input id="curr_date" type="date" ...

You shouldn't have to deal with any type of conversion or anything else.

Also, only use formControlName or value but never both. If you have a reactive form built, then set the value in the TS and not in the HTML.

Myles Morrone
  • 163
  • 9
  • 1
    Hi @Myles, thanks for your response. I see that now it shows input date control along with datepicker with "mm/dd/yyyy" text written in it. I am assuming it picks up this specific date format from computer locale. But I wonder why it does not show the preset date assigned to curr_date in ts. I confirmed it displays preset values for first and last name form fields. **HTML** **TS** .... firstName: ['Ajit', Validators.required], lastName: ['Test'], curr_date: ['2008-03-28T00:00:00'], ... ... Regards, Ajit – Ajit_S Aug 17 '23 at 23:51
  • 1
    Just noticed that if you preset the date in ts using yyyy-mm-dd format, it is displayed in date input field presumably because it's a date field and not datetime field. – Ajit_S Aug 18 '23 at 00:49
  • Yep exactly, if you use datetime it uses a completely different picker modal and everything. Glad to be of help! – Myles Morrone Aug 19 '23 at 18:11