How to format a date with moment, to show in a date picker with the ngmodel?

Question

I have a time object in momentjs, I getting this error on the web browser console:

[Error] ERROR – Error: Uncaught (in promise): TypeError: date.isValid is not a function. (In 'date.isValid()', 'date.isValid' is undefined)
fromModel
writeValue

forEach@[native code]
setValue

onInvoke
run

onInvokeTask
runTask
drainMicroTaskQueue
invokeTask
invokeTask
globalZoneAwareCallback

Error: Uncaught (in promise): TypeError: date.isValid is not a function. (In 'date.isValid()', 'date.isValid' is undefined)
fromModel
writeValue

forEach@[native code]
setValue

onInvoke
run

onInvokeTask
runTask
drainMicroTaskQueue
invokeTask
invokeTask
globalZoneAwareCallbackresolvePromise(función anónima)onInvokeTaskrunTaskdrainMicroTaskQueueinvokeTaskinvokeTaskglobalZoneAwareCallback
defaultErrorLogger (core.js:1873)
handleError (core.js:1922)
next (core.js:5008:105)
(función anónima) (core.js:3993)
__tryOrUnsub (Subscriber.js:262)
next (Subscriber.js:200)
_next (Subscriber.js:138)
next (Subscriber.js:102)
next (Subject.js:64)
emit (core.js:3985)
run (zone.js:137)
onHandleError (core.js:4365)
runGuarded (zone.js:153)
_loop_1 (zone.js:676)
microtaskDrainDone (zone.js:685)
drainMicroTaskQueue (zone.js:601)
invokeTask (zone.js:499)
invokeTask (zone.js:1539)
globalZoneAwareCallback (zone.js:1565)

All this is in the user component but comes from a another entity called extendedUser that have a relationship oneToone in the extedededUser DTO I expand the userDTO so all data come well but the date is getting trouble so I checkout the extendedUser service I find some functions to setup the date, and I try to implement it on the user service bit I think im missing something, I do a console log on both and show the same data object so I think the error is in the service

The service of extended User that show well the date

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import * as moment from 'moment';
import { DATE_FORMAT } from 'app/shared/constants/input.constants';
import { SERVER_API_URL } from 'app/app.constants';
import { createRequestOption } from 'app/shared';
import { IExtendedUser } from 'app/shared/model/extended-user.model';
type EntityResponseType = HttpResponse<IExtendedUser>;
type EntityArrayResponseType = HttpResponse<IExtendedUser[]>;
@Injectable({ providedIn: 'root' })
export class ExtendedUserService {
    private resourceUrl = SERVER_API_URL + 'api/extended-users';
    constructor(private http: HttpClient) {}
    create(extendedUser: IExtendedUser): Observable<EntityResponseType> {
        const copy = this.convertDateFromClient(extendedUser);
        return this.http
            .post<IExtendedUser>(this.resourceUrl, copy, { observe: 'response' })
            .map((res: EntityResponseType) => this.convertDateFromServer(res));
    }
    update(extendedUser: IExtendedUser): Observable<EntityResponseType> {
        const copy = this.convertDateFromClient(extendedUser);
        return this.http
            .put<IExtendedUser>(this.resourceUrl, copy, { observe: 'response' })
            .map((res: EntityResponseType) => this.convertDateFromServer(res));
    }
    find(id: number): Observable<EntityResponseType> {
        return this.http
            .get<IExtendedUser>(`${this.resourceUrl}/${id}`, { observe: 'response' })
            .map((res: EntityResponseType) => this.convertDateFromServer(res));
    }
    query(req?: any): Observable<EntityArrayResponseType> {
        const options = createRequestOption(req);
        return this.http
            .get<IExtendedUser[]>(this.resourceUrl, { params: options, observe: 'response' })
            .map((res: EntityArrayResponseType) => this.convertDateArrayFromServer(res));
    }
    delete(id: number): Observable<HttpResponse<any>> {
        return this.http.delete<any>(`${this.resourceUrl}/${id}`, { observe: 'response' });
    }
    private convertDateFromClient(extendedUser: IExtendedUser): IExtendedUser {
        const copy: IExtendedUser = Object.assign({}, extendedUser, {
            fechaIngreso:
                extendedUser.fechaIngreso != null && extendedUser.fechaIngreso.isValid()
                    ? extendedUser.fechaIngreso.format(DATE_FORMAT)
                    : null
        });
        return copy;
    }
    private convertDateFromServer(res: EntityResponseType): EntityResponseType {
        res.body.fechaIngreso = res.body.fechaIngreso != null ? moment(res.body.fechaIngreso) : null;
        return res;
    }
    private convertDateArrayFromServer(res: EntityArrayResponseType): EntityArrayResponseType {
        res.body.forEach((extendedUser: IExtendedUser) => {
            extendedUser.fechaIngreso = extendedUser.fechaIngreso != null ? moment(extendedUser.fechaIngreso) : null;
        });
        return res;
    }
}

The code in my user service when I get the error

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';

import { SERVER_API_URL } from 'app/app.constants';
import { createRequestOption } from 'app/shared/util/request-util';
import {IUser } from './user.model';
import {ExtendedUser, IExtendedUser} from "../../shared/model/extended-user.model";
import {DATE_FORMAT} from "../../shared";
import * as moment from 'moment';

type EntityResponseType = HttpResponse<IExtendedUser>;

@Injectable({ providedIn: 'root' })
export class UserService {
    private resourceUrl = SERVER_API_URL + 'api/users';

    constructor(private http: HttpClient) {}

    create(user: IUser): Observable<HttpResponse<IUser>> {
        const copy = this.convertDateFromClient(user);
        return this.http.post<IUser>(this.resourceUrl + '-and-extendedUser', copy, { observe: 'response' })
        .map((res: EntityResponseType) => this.convertDateFromServer(res));
    }

    update(user: IUser): Observable<HttpResponse<IUser>> {
        const copy = this.convertDateFromClient(user);
        return this.http.put<IUser>(this.resourceUrl, copy , { observe: 'response' })
            .map((res: EntityResponseType) => this.convertDateFromServer(res));
    }

    find(login: string): Observable<HttpResponse<IUser>> {
        return this.http.get<IExtendedUser>(`${this.resourceUrl}/${login}`, { observe: 'response' });
    }

    query(req?: any): Observable<HttpResponse<IUser[]>> {
        const options = createRequestOption(req);
        return this.http.get<IUser[]>(this.resourceUrl, { params: options, observe: 'response' }) ;
    }

    delete(login: string): Observable<HttpResponse<any>> {
        return this.http.delete(`${this.resourceUrl}/${login}`, { observe: 'response' });
    }

    authorities(): Observable<string[]> {
        return this.http.get<string[]>(SERVER_API_URL + 'api/users/authorities');
    }
    private convertDateFromClient(user: IExtendedUser): IUser {
        const copy: IUser = Object.assign({}, user, {
            fechaIngreso:
                user.fechaIngreso != null && user.fechaIngreso.isValid()
                    ? user.fechaIngreso.format(DATE_FORMAT)
                    : null
        });
        return copy;
    }
    private convertDateFromServer(res: EntityResponseType): EntityResponseType {
        res.body.fechaIngreso = res.body.fechaIngreso != null ? moment(res.body.fechaIngreso) : null;
        return res;
    }
}

I want to show the date in the date picker.

Please be careful when tagging languages on this site. java and javascript are about as similar as ham and hamster. — Joe C

Misael Landeros Misael Landeros · Accepted Answer · 2019-01-13T00:43:38

Update

I found the problem

I wasnt setting the date in:

find(login: string): Observable<HttpResponse<IUser>> {
    return this.http.get<IExtendedUser>(`${this.resourceUrl}/${login}`, { observe: 'response' });
}

so i add it

 find(login: string): Observable<HttpResponse<IUser>> {
        return this.http.get<IExtendedUser>(`${this.resourceUrl}/${login}`, { observe: 'response' })
            .map((res: EntityResponseType) => this.convertDateFromServer(res));
    }

How to format a date with moment, to show in a date picker with the ngmodel?

1 Answers