Bind saved Date in Edit Form using Angular 17

Question

I have a form where the date is entered and saved but the date is not binded when I go to edit the form.

JSON:

"checkOut": {
    "runDate": "2024-07-05T09:42:00.000Z",
}

The form is:

<input type="datetime-local" [(ngModel)]="checkOut.runDate">

Date is shown by binding like this:

{{source.room.checkOut?.runDate | date:"dd MMM, yyyy"}}

When I go to edit the form, I want the input field [(ngModel)]="checkOut.runDate" to be pre-filled if the date is already entered. How can I achieve this?

Naren Murali · Accepted Answer · 2024-06-26 05:26:48Z

2

Datetime local excepts the input to be like 2024-07-05T09:42:00, So we can transform it to suit the requirement.

ngOnInit() {
    this.checkOut.runDate = this.checkOut?.runDate?.split('.')?.[0];
}

Full Code:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, CommonModule],
  template: `
   <input type="datetime-local" [(ngModel)]="checkOut.runDate">
   <br/>
   {{checkOut.runDate | date:"long"}}
  `,
})
export class App {
  checkOut: any = {
    runDate: '2024-07-05T09:42:00.000Z',
  };

  ngOnInit() {
    this.checkOut.runDate = this.checkOut?.runDate?.split('.')?.[0];
  }
}

bootstrapApplication(App);

Stackblitz Demo

edited Jun 26, 2024 at 5:26

answered Jun 26, 2024 at 5:15

Naren Murali

66.3k6 gold badges51 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Elaine Byene Over a year ago

Thank you so much. Got it working. What does split('.')?.[0]; do btw?

Naren Murali Over a year ago

@ElaineByene It converts the date to 2024-07-05T09:42:00 by splitting on the . Then it gets converted into ['2024-07-05T09:42:00', '000Z'] here we access the zeroth element, which is our expected output!

Collectives™ on Stack Overflow

Bind saved Date in Edit Form using Angular 17

1 Answer 1

Full Code:

Stackblitz Demo

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Full Code:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related