反应式表单未获取日期和时间值

Question

我正在制作一个表格来上传内容，但是当我 console.log 表格时，我没有得到我输入的日期和时间的值，它们是空的，但已经有一个我设置的值TS，有什么帮助吗？也许我做错了。

这是我的表格，日期和时间的输入在最后

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

这是我的 TS 文件

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


}

所以我在这里将输入的值设置为用户打开表单的实际时间，这是它的外观和我得到的数组，你可以看到“fecha”和“hora”在数组中是空的，但在表格中已经有一个值

Answer 1

哇，我感觉很糟糕，我没有得到值，因为我没有在 FormGroup 中指定“fecha”和“hora”是 Date() 类型

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

我只需要指定它，现在我正在获取值。

反应式表单未获取日期和时间值

Reactive forms not getting date and time values

html

forms

typescript

angular

angular-reactive-forms