Entrar Ainda não tem acesso?
2
respostas

Problemas com dados tipo date

por Natali Sâmara Domingos da Silva
| 62.9k xp | 77 posts
Analista de Suporte

Estou estudando angular e no momento preciso adicionar a data de nascimento de uma pessoa. Porém estou recebendo invalid date e com isso meu back end recebe a informação como null.

Aqui esta a minha interface:

export interface Pessoa {
    id: number;
    nome: String;
    nomeSocial: String;
    dataNascimento: Date;
    cpf: String;
    rg: String,
    email: String;
    telefone: String;
    whats: boolean;
    endereco: Endereco;
}

o meu component esta da seguinte forma:

export class FormPessoaComponent implements OnInit {

    @ViewChild('dataInput') dataInput: ElementRef;

    formulario: FormGroup;

    value: string | undefined;

    estados: Estados[] = [];
    pessoa: Pessoa;


    constructor(private service: PessoaService,
                private estadoService: EstadosService,
                private fb: FormBuilder,
                private router: Router,
                private messageService: MessageService) {

        this.formulario = this.fb.group({
            nome: ['', [Validators.required]],
            nomeSocial: [''],
            dataNascimento: ['', [Validators.required]],
            rg: ['', [Validators.required]],
            cpf: ['', [Validators.required]],
            logradouro: ['', [Validators.required]],
            bairro: ['', [Validators.required]],
            numero: ['', [Validators.required]],
            cidade:['', [Validators.required]],
            estado: ['', [Validators.required]],
            cep: ['', [Validators.required]],
            telefone: ['', [Validators.required]],
            email: [''],
            whats: false
        });
    }

    ngOnInit(): void {
        this.listaEstados();
    }

    listaEstados() {
        this.estadoService.listarEstado().subscribe((estados: Estados[]) => {
            this.estados = estados;
        });
    }

    salvar() {
        if (this.formulario.valid) {
            this.removerMascaras();

            const dadosFormulario = this.formulario.value;

            this.pessoa = {
                id: null,
                nome: dadosFormulario.nome,
                nomeSocial: dadosFormulario.nomeSocial,
                dataNascimento: new Date(dadosFormulario.dataNascimento),
                cpf: dadosFormulario.cpf,
                rg: dadosFormulario.rg,
                email: dadosFormulario.email,
                telefone: dadosFormulario.telefone,
                whats: dadosFormulario.whats,

                endereco: {
                    logradouro: dadosFormulario.logradouro,
                    bairro: dadosFormulario.bairro,
                    numero: dadosFormulario.numero,
                    cidade: dadosFormulario.cidade,
                    cep: dadosFormulario.cep,
                    uf: dadosFormulario.estado.nome,
                    complemento: '',
                },
            };
            console.log(this.pessoa);

            this.service.salvarPessoa(this.pessoa).subscribe((resposta) => {
                if (resposta) {
                    this.showSucesso();
                } else {
                    this.showError();
                }
            });
        }
    }


    private removerMascaras() {
        const camposComMascara = ['cpf',  'cep'];

        camposComMascara.forEach(campo => {
            const valorCampo = this.formulario.get(campo).value;
            if (valorCampo) {
                this.formulario.get(campo).setValue(valorCampo.replace(/\D/g, ''));
            }
        });
    }

e por fim o html que contém a parte do formulário de data:

            <div class="field">
                <label htmlFor="dataNascimento">Data de Nascimento</label>

                <p-inputMask
                    formControlName="dataNascimento"
                    mask="99/99/9999"
                    placeholder="99/99/9999"
                    formControlName="dataNascimento">
                </p-inputMask>
                <div *ngIf="formulario.get('dataNascimento').touched && formulario.get('dataNascimento').hasError('required')">
                    A data de nascimento é obrigatória.
                </div>
            </div>
        </div>
    </div>

alguém poderia me socorrer em como eu consigo salvar esta data no formato date? A titulo de informação estou usando prime ng.

2 respostas
por Estudante
| 569.5k xp | 1338 posts

Parece que o problema está na forma como você está tratando a data no método salvar() do seu componente. O campo dataNascimento está usando uma máscara no formato '99/99/9999', mas ao criar a instância de Date no TypeScript, ele pode estar interpretando isso de maneira incorreta.

Você pode tentar ajustar o trecho onde você cria a instância de Date no objeto pessoa. Certifique-se de analisar a string da data corretamente. Aqui está uma sugestão de ajuste:

Altere esta linha no método salvar():

dataNascimento: new Date(dadosFormulario.dataNascimento),

Para algo assim:

dataNascimento: this.parseDate(dadosFormulario.dataNascimento),

E adicione o método parseDate no seu componente:

private parseDate(dateString: string): Date {
  const parts = dateString.split('/');
  const day = parseInt(parts[0], 10);
  const month = parseInt(parts[1], 10) - 1; // Mês no JavaScript é base 0
  const year = parseInt(parts[2], 10);
  return new Date(year, month, day);
}

Este método parseDate divide a string da data com base na barra (/) e cria uma instância válida de Date considerando a ordem correta para o dia, mês e ano.

a.

por Natali Sâmara Domingos da Silva
| 62.9k xp | 77 posts
Analista de Suporte

Fiz a alteração e agora quando salvo aparece null no banco de dados. Pelo console acredito que seja o formato: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

o que eu espero receber no meu bakc end seria assim:

@JsonProperty("dataNascimento")
        @JsonFormat(pattern = "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", timezone = "GMT")
        Date dataNascimento,

Atualizando o código no meu component ficou assim:

salvar() {
        if (this.formulario.valid) {
            this.removerMascaras();

            const dadosFormulario = this.formulario.value;

            this.pessoa = {
                id: null,
                nome: dadosFormulario.nome,
                nomeSocial: dadosFormulario.nomeSocial,
                dataNascimento: this.parseDate(dadosFormulario.dataNascimento),
                cpf: dadosFormulario.cpf,
                rg: dadosFormulario.rg,
                email: dadosFormulario.email,
                telefone: dadosFormulario.telefone,
                whats: dadosFormulario.whats,
                nomeMae: dadosFormulario.nomeMae,
                nomePai: dadosFormulario.nomePai,
                sexo: dadosFormulario.sexo.nome,

                endereco: {
                    logradouro: dadosFormulario.logradouro,
                    bairro: dadosFormulario.bairro,
                    numero: dadosFormulario.numero,
                    cidade: dadosFormulario.cidade,
                    cep: dadosFormulario.cep,
                    uf: dadosFormulario.estado.nome,
                    complemento: '',
                },
            };
            console.log(this.pessoa);

            this.service.salvarPessoa(this.pessoa).subscribe((resposta) => {
                if (resposta) {
                    this.showSucesso();
                } else {
                    this.showError();
                }
            });
        }
    }


    private parseDate(dateString: string): Date {
        const parts = dateString.split('/');
        const day = parseInt(parts[0], 10);
        const month = parseInt(parts[1], 10) - 1; // Mês no JavaScript é base 0
        const year = parseInt(parts[2], 10);
        return new Date(year, month, day);
    }


    private removerMascaras() {
        const camposComMascara = ['cpf',  'cep'];

        camposComMascara.forEach(campo => {
            const valorCampo = this.formulario.get(campo).value;
            if (valorCampo) {
                this.formulario.get(campo).setValue(valorCampo.replace(/\D/g, ''));
            }
        });
    }