Reactive forms not getting date and time values

Question

I'm making a form to upload content but when I console.log the form I'm not getting the values of my inputs date and time, they are empty but theres already a value that I set from the TS, any help on this? maybe I'm doing this wrong.

This is my form, the inputs of date and time are at the end

<form [formGroup]="noticiaForm" (ngSubmit)="noticiaForm.valid && onSubmit()" class="needs-validation row g-2" novalidate #formNoticia="ngForm">
      
    <div class="mb-2">
      <label for="titulo" class="col-lg-10 col-form-label fw-bold">Titulo del Articulo</label>
      <div class="col-lg-6">
        <input formControlName="titulo" type="text" class="form-control" name="titulo" id="titulo" placeholder="Titulo del articulo" autocomplete="off" required ngClass="{{noticiaForm.get('titulo')?.invalid && noticiaForm.get('titulo')?.touched || formNoticia.submitted ? 'is-invalid' : ''}}">
        <div class="invalid-feedback" *ngIf="noticiaForm.get('titulo')?.invalid">Ingresa el titulo del articulo</div>
      </div>
      
    </div>

    <div class="mb-2">
      <label for="autor" class="col-lg-10 col-form-label fw-bold">Autor</label>
      <div class="col-lg-6">
        <input formControlName="autor" type="text" class="form-control" name="autor" id="autor" placeholder="Autor del articulo" autocomplete="off">
      </div>
    </div>

    <div class="mb-3">
      <label for="formFile" class="form-label col-lg-3 fw-bold">Imagen principal</label>
      <div class="col-lg-6">
        <input formControlName="imagenPrincipal" class="form-control" type="file" id="formFile">
      </div>
    </div>

    <div class="mb-5">
      <label for="contenidoArticulo" class="form-label col-lg-3 fw-bold">Contenido del articulo</label>
      <div class="col-lg-12 richText" ngClass="{{noticiaForm.get('contenidoArticulo')?.invalid && noticiaForm.get('contenidoArticulo')?.touched || formNoticia.submitted ? 'invalidRichtext' : ''}}">
        <quill-editor formControlName="contenidoArticulo" [required]="true" ngClass="{{noticiaForm.get('contenidoArticulo')?.invalid && noticiaForm.get('contenidoArticulo')?.touched || formNoticia.submitted ? 'is-invalid' : ''}}"></quill-editor>
        <div class="invalid-feedback" *ngIf="noticiaForm.get('contenidoArticulo')?.invalid">Ingresa el contenido del articulo</div>
      </div>
    </div>

    <div class="mb-3 mt-5">
      <label for="descripcion" class="form-label fw-bold">Descripcion del articulo</label>
      <div class="col-lg-12">
        <textarea class="form-control" id="descripcion" formControlName="descripcion" rows="5" placeholder="Primer parrafo o parrafos del articulo" required ngClass="{{noticiaForm.get('descripcion')?.invalid && noticiaForm.get('descripcion')?.touched || formNoticia.submitted ? 'is-invalid' : ''}}"></textarea>
        <div class="invalid-feedback" *ngIf="noticiaForm.get('descripcion')?.invalid">Ingresa la descripcion del articulo</div>
      </div>
    </div>

    <div class="row g-2">
      <div class="mb-3 col-lg-4">
        <label for="categorias" class="form-label fw-bold">Categorias</label>
        <mat-form-field class="col-lg-12" appearance="fill" >
          <mat-label>Categorias</mat-label>
          <mat-select formControlName="categorias" multiple required>
            <mat-option *ngFor="let categoria of categoriasNoticias" [value]="categoria">{{categoria}}</mat-option>
          </mat-select>
        </mat-form-field>           
      </div>
     

      <!--Inputs of date and time-->
      <div class="mb-3 col-lg-3 ms-lg-5">
        <label for="fecha" class="form-label fw-bold">Fecha</label>
        <div class="col-lg-8">
          <input type="date" id="fecha" class="form-control mt-lg-1" formControlName="fecha" readonly>
        </div>
      </div>

      <div class="mb-3 col-lg-4">
        <label for="hora" class="form-label fw-bold disabled">Hora</label>
        <div class="col-lg-5">
          <input type="time" id="hora" class="form-control mt-lg-1" formControlName="hora" readonly>
        </div>
      </div>
      <!--Inputs of date and time-->

      
    </div>
    
    <div class="mb-3">
      <button type="submit" class="btn btn-primary" >Guardar</button>
    </div>

  </form>

This is my TS file

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { DatePipe } from '@angular/common';

declare var $: any;

@Component({
  selector: 'app-agregar-noticia',
  templateUrl: './agregar-noticia.component.html',
  styleUrls: ['./agregar-noticia.component.css']
})
export class AgregarNoticiaComponent implements OnInit {

  categoriasNoticias: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato', 'Otro', 'Ejemplo', 'Largo', 'Chico', 'Mediano'];


  noticiaForm = new FormGroup({
    titulo: new  FormControl('', Validators.required),
    autor: new FormControl(''),
    imagenPrincipal: new FormControl(''),
    contenidoArticulo: new FormControl('', Validators.required),
    descripcion: new FormControl('', Validators.required),
    categorias: new FormControl('', Validators.required),
    fecha: new FormControl(''),
    hora: new FormControl('')
  });

  fechaActual = new Date().toLocaleDateString();
  horaActual = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})


  constructor(private datePipe: DatePipe) { 

    
    console.log(this.datePipe.transform(this.fechaActual, 'yyyy-MM-dd'), this.horaActual)

    $(() =>{
      var fecha = $('#fecha');
      $(fecha).val(this.datePipe.transform(this.fechaActual, 'yyyy-MM-dd'));
      $('#hora').val(this.horaActual)
    })

    

    
  }

  ngOnInit(): void { }

  onSubmit(){
    console.log(this.noticiaForm.value)
  }


}

So here I'm setting the values of the inputs to the actual time the user opens the form, this is how it looks and the array I'm getting, you can see that "fecha" and "hora" are empty in the array but in the form theres already a value

Answer 1

Wow I'm feeling bad, I wasnt getting the values because I didnt specify in the FormGroup that "fecha" and "hora" are Date() types

fecha: new FormControl(new Date().toLocaleDateString()),
hora: new FormControl(new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}))

I only had to specify that and now I'm getting the values.