I need to put a default value in my input datetime-local but for some reason it is not populated in angular. Please tell me what I need to do to make this right. My code is below

<!--Completion Date-->
<div class="form-group">
    <input
      formControlName="pletionDate"
      type="datetime-local"
      id="pletionDate"
      placeholder="yyyy-MM-ddTHH:mm:ss"
      [min]="date"
      class="form-control"
      required
    />
</div>

populateDate(): string {
    this.dateObj = new Date();
    this.month = this.dateObj.getUTCMonth() + 1;
    this.day = this.dateObj.getUTCDate();
    this.year = this.dateObj.getUTCFullYear();

    return `${this.year}-${this.month}-${this.day}`;
}

createTroubleTicketForm() {
    this.troublTicketForm = this.fb.group({
      ttNum: [null, Validators.required],
      status: [null, Validators.required],
      pletionDate: [null],
      incident: [null, Validators.required],
      rootCause: [null, Validators.required],
      resolution: [null],
      category: [null, Validators.required],
      plazaCode: [null, Validators.required],
      laneNum: [null, Validators.required],
      reportedBy: [null],
      helpDeskAgent: [null, Validators.required],
      assignedToTier: [null],
      ticketCreated: [this.populateDate(), Validators.required],
      remarks: [null]
    });
}

I need to put a default value in my input datetime-local but for some reason it is not populated in angular. Please tell me what I need to do to make this right. My code is below

<!--Completion Date-->
<div class="form-group">
    <input
      formControlName="pletionDate"
      type="datetime-local"
      id="pletionDate"
      placeholder="yyyy-MM-ddTHH:mm:ss"
      [min]="date"
      class="form-control"
      required
    />
</div>

populateDate(): string {
    this.dateObj = new Date();
    this.month = this.dateObj.getUTCMonth() + 1;
    this.day = this.dateObj.getUTCDate();
    this.year = this.dateObj.getUTCFullYear();

    return `${this.year}-${this.month}-${this.day}`;
}

createTroubleTicketForm() {
    this.troublTicketForm = this.fb.group({
      ttNum: [null, Validators.required],
      status: [null, Validators.required],
      pletionDate: [null],
      incident: [null, Validators.required],
      rootCause: [null, Validators.required],
      resolution: [null],
      category: [null, Validators.required],
      plazaCode: [null, Validators.required],
      laneNum: [null, Validators.required],
      reportedBy: [null],
      helpDeskAgent: [null, Validators.required],
      assignedToTier: [null],
      ticketCreated: [this.populateDate(), Validators.required],
      remarks: [null]
    });
}

• javascript
• angular
• typescript

1 Answer 1

You'd need to convert date into ISO format before it could be assigned via [ngModel];

relevant TS:

  pleteDate: Date;
  localCompleteDate: string;
  constructor() {
    this.pleteDate = new Date();
    this.localCompleteDate = this.pleteDate.toISOString();
    this.localCompleteDate = this.localCompleteDate.substring(0, this.localCompleteDate.length - 1);
  }

relevant HTML:

<input
  type="datetime-local"
  id="pletionDate"
  [ngModel] = "localCompleteDate"
  placeholder="yyyy-MM-ddTHH:mm:ss"
  [min]="date"
  class="form-control"
  required
/>
<br/>
Date: {{pleteDate | date:'short'}}
<br/>
ISO Date: {{ localCompleteDate }}

check plete working stackblitz here