Angular中如何在add函数中获取type="date"输入框的日期值？

Hey there! Great question—switching an input to type="date" does change a few things about how you handle its value, but it's actually straightforward once you know the details. Let's break this down with fixes for your code and explanations of the "why" behind it.

First: Fix the Duplicate (ngSubmit) Issue #

First off, your form has two (ngSubmit) handlers, which is invalid in Angular (only the last one will execute). Since your add() function already calls loadUser(), we can remove the duplicate handler entirely.

How to Access the Date Input's Value #

You can still use #anno_n.value just like you did with text inputs—but there's a key detail about the format:

• A type="date" input returns its value as an ISO 8601 standardized string (e.g., 2024-05-20), regardless of how the browser displays the date (based on the user's locale). This is a HTML5 standard, designed to make date data consistent for APIs/backends.

Corrected Form Template #

Here's your fixed component HTML (note I also fixed duplicate id attributes—every element needs a unique id for accessibility and valid HTML):

<form class="row row-cols-lg-auto g-3 align-items-center float-center" (ngSubmit)="add(nome.value, cognome.value, anno_n.value)" style="justify-content: center;"> 
  <div class="col-12"> 
    <label class="visually-hidden" for="inlineFormInputGroupNome">Nome</label> 
    <div class="input-group"> 
      <input type="text" class="form-control" id="inlineFormInputGroupNome" required #nome placeholder="Nome"> 
    </div> 
  </div> 
  <div class="col-12"> 
    <label class="visually-hidden" for="inlineFormInputGroupCognome">Cognome</label> 
    <div class="input-group"> 
      <input type="text" class="form-control" id="inlineFormInputGroupCognome" required #cognome placeholder="Cognome"> 
    </div> 
  </div> 
  <div class="col-12"> 
    <label class="visually-hidden" for="inlineFormInputGroupDataNascita">Data di nascita</label> 
    <div class="input-group"> 
      <input type="date" class="form-control" id="inlineFormInputGroupDataNascita" required #anno_n placeholder="Data di nascita (GG/MM/AAAA)"> 
    </div> 
  </div> 
  <div class="col-12"> 
    <button type="submit" class="btn btn-primary shadow-lg">Salva</button> 
  </div> 
</form>

If You Need a Different Date Format #

If your backend expects a non-ISO format (like DD/MM/YYYY), you can convert the ISO string in your component's add() function. Here are two common ways:

1. Manual Conversion (Vanilla JS) #

add(nome: string, cognome: string, annoNascitaIso: string): void {
  // Convert ISO string to DD/MM/YYYY
  const date = new Date(annoNascitaIso);
  const giorno = String(date.getDate()).padStart(2, '0');
  const mese = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed in JS
  const anno = date.getFullYear();
  const dataFormattata = `${giorno}/${mese}/${anno}`;

  this.PartecipantiService.addP(nome, cognome, dataFormattata).subscribe(res => {
    console.log(res);
    this.loadUser();
  });
}

2. Using Angular's DatePipe #

For more complex formatting, use Angular's built-in DatePipe (make sure CommonModule is imported in your component's module):

import { DatePipe } from '@angular/common';

@Component({
  // ... your component metadata
  providers: [DatePipe] // Add DatePipe to providers
})
export class YourComponent {
  constructor(private datePipe: DatePipe) {}

  add(nome: string, cognome: string, annoNascitaIso: string): void {
    const dataFormattata = this.datePipe.transform(annoNascitaIso, 'dd/MM/yyyy');
    
    this.PartecipantiService.addP(nome, cognome, dataFormattata!).subscribe(res => {
      console.log(res);
      this.loadUser();
    });
  }
}

Bonus: Get a Date Object Directly #

If you want to work with a JavaScript Date object instead of a string (for calculations, etc.), use the input's valueAsDate property instead of value:

• In the template: add(nome.value, cognome.value, anno_n.valueAsDate)
• In the component:

  add(nome: string, cognome: string, annoNascita: Date | null): void {
    if (!annoNascita) return; // Handle invalid date case
    
    // Convert Date object to your desired format
    const dataFormattata = this.datePipe.transform(annoNascita, 'yyyy-MM-dd');
    
    this.PartecipantiService.addP(nome, cognome, dataFormattata!).subscribe(res => {
      console.log(res);
      this.loadUser();
    });
  }
  

Key Principles Explained #

1. Standardized Value: type="date" inputs return ISO 8601 strings to ensure consistency across browsers and locales—this avoids messy parsing of user-inputted text dates.
2. Template Reference Variables: #anno_n refers to the native HTMLInputElement, so .value and .valueAsDate are native properties of the element itself (Angular just exposes them directly in the template).
3. Duplicate Handlers: A form can only have one (ngSubmit) handler—having two leads to unexpected behavior, so always consolidate your logic into one function call.

内容的提问来源于stack exchange，提问作者Francesco Di Trento