我正在制作一個表單來上傳內容，但是當我 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”是空的但在形式上已經有一個值
uj5u.com熱心網友回復：
哇，我感覺很糟糕，我沒有得到值，因為我沒有在 FormGroup 中指定“fecha”和“hora”是 Date() 型別
fecha: new FormControl(new Date().toLocaleDateString()),
hora: new FormControl(new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}))
我只需要指定它，現在我得到了這些值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/443866.html