'Take the Date value in angular to add new user

I have a db with some users, I have to add a new user to this list but I have a problem with the Date value. I take the fiel "nome(name)" and "cognome(surname)" with nome.value because they're a string but I have a problem with the anno_n(birth) because it's a Date type

COMPONENT.HTML

  <div class="lista pt-5">
    <h2 class="text-dark">Aggiungi un nuovo partecipante</h2>
    <form class="row row-cols-lg-auto g-3 align-items-center float-center" (ngSubmit)="add(nome.value, cognome.value, anno_n.value)" (ngSubmit)="loadUser()" style="justify-content: center;">
      <div class="col-12">
        <label class="visually-hidden" for="inlineFormInputGroupUsername">Nome</label>
        <div class="input-group">
          <input type="text" class="form-control" id="inlineFormInputGroupUsername" required #nome placeholder="Nome">
        </div>
      </div>
      <div class="col-12">
        <label class="visually-hidden" for="inlineFormInputGroupUsername">Cognome</label>
        <div class="input-group">
          <input type="text" class="form-control" id="inlineFormInputGroupUsername" required #cognome placeholder="Cognome">
        </div>
      </div>
      <div class="col-12">
        <label class="visually-hidden" for="inlineFormInputGroupUsername">Data di nascita</label>
        <div class="input-group">
          <input type="date" class="form-control" id="inlineFormInputGroupUsername" required ng-model="anno_n.value" #anno_n useValueAsDate 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>
    </div>
COMPONENT.TS

add(nome: string, cognome: string, anno_n: string): void {
      this.PartecipantiService.addP(nome, cognome, anno_n).subscribe(res => {
          console.log(res);
          this.loadUser();
        })
      }
export interface Partecipanti {
    id: number;
    nome: string;
    cognome: string;
    anno_n: Date;
  }


SERVICE.TS
addP(nome: string, cognome: string, anno_n: string): Observable<any> {
     return this.http.post<Partecipanti>(this.partecipantiUrl, {
       nome: nome,
       cognome: cognome,
       anno_n: new Date(anno_n)
     }, this.httpOptions).pipe(
       tap((newPartecipante: Partecipanti) => this.log(`partecipante aggiunto w/ id=${newPartecipante.id}`)),
       catchError(this.handleError<Partecipanti>('addP'))
     );
   }
javascripthtmlangular


Solution 1:[1]

You're using an input of type "date" - this already returns a Date, and you are again converting it to date in your service. Remove the anno_n: new Date(anno_n) from your POST call and see if this works.

Solution 2:[2]

Put a console.log in your service

addP(nome: string, cognome: string, anno_n: string): Observable<any> {
     console.log(new Date(anno_n))
     ...
   }

If it prints the correct date, then your problem is with the api, it probably doesn't accept a date object. Why bother converting it anyways? Just keep it as a string and convert it when you need it.

export interface Partecipanti {
    id: number;
    nome: string;
    cognome: string;
    anno_n: string;
  }

addP(nome: string, cognome: string, anno_n: string): Observable<any> {
     return this.http.post<Partecipanti>(this.partecipantiUrl, {
       nome: nome,
       cognome: cognome,
       anno_n: anno_n
     }, this.httpOptions).pipe(
       tap((newPartecipante: Partecipanti) => this.log(`partecipante aggiunto w/ id=${newPartecipante.id}`)),
       catchError(this.handleError<Partecipanti>('addP'))
     );
   }

Edit

So your api probably wants a string a number or a Date object.

To convert from Date to string (YYYY-MM-DDTHH:mm:ss.sssZ)

myDateString = myDateObject.toISOString()

To convert from Date to number (unix milliseconds)

unixMillis = myDateObject.getTime()

The Date constructor accepts both these values to convert them back into a date object.

myDateObject = new Date(myDateString)

OR

myDateObject = new Date(unixMillis)

You need to figure out what your api actually wants, and make sure anno_n is in the correct format when you send it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eddie Paz
Solution 2

Related Questions