0

estoy tratando de crear un registro nuevo en Angular y Spring pero al crear un nuevo registro me crear con datos nulos y no con los datos ingresados en los inputs , ya importe HttpClientModule en mi module y en mi servicio importe HttpClient,HttpHeaders , ¿por que ser crear nulos? al probar enviar los datos ingresados de los inputs a consola , si me reciven y se muestra en consola , pero al conectarlo con spring se crean datos nulos creados en la base de datos

este es mi código spring , metodo Post para crear un Cliente nuevo

@PostMapping("/crearCliente")
   @ResponseStatus(HttpStatus.CREATED)
   public Cliente create(@RequestBody Cliente cliente) {
       cliente.setCLI_REGIS(new Date());
       return clienteServicio.save(cliente); 

este es mi código en Angular:

este es mi clase cliente :

export class Cliente{
    CLI_ID:number;
    CLI_NOM:String;
    CLI_APELL:String;
    CLI_EMAIL:String;
    CLI_REGIS:String;
}

Importo HttpClientModule en app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ListarComponent } from './listar/listar.component';
import { ClienteComponent } from './cliente/cliente.component';
import {Routes,RouterModule} from '@angular/router';

import {HttpClientModule} from '@angular/common/http';

import {ClienteService} from './cliente/cliente.service';
import { CrearComponent } from './crear/crear.component';

import {FormsModule} from '@angular/forms';


const rutas:Routes=[
  {path:'',component:ClienteComponent},
  {path:'listar',component:ListarComponent},
  {path:'crear',component:CrearComponent},
  {path:'**',component:ClienteComponent}
]

@NgModule({
  declarations: [
    AppComponent,
    ListarComponent,
    ClienteComponent,
    CrearComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    FormsModule,
    RouterModule.forRoot(rutas)
  ],
  providers: [ClienteService],
  bootstrap: [AppComponent]
})
export class AppModule { }

importo HttpClient en mi servicio

import { ImplicitReceiver } from '@angular/compiler';
import {Injectable} from '@angular/core';

import {Cliente} from './cliente';

import {Observable} from 'rxjs';

import {HttpClient,HttpHeaders} from '@angular/common/http';

@Injectable()
export class ClienteService{
    
    private url : string = 'http://localhost:8080/api/cli/listar';
    private urlcrear :string ='http://localhost:8080/api/cli/crearCliente';

    private httpHeaders = new HttpHeaders({'Content-type':'application/json'})

    constructor(private http:HttpClient){
    }

    getClientes():Observable<Cliente[]>{

        return this.http.get<Cliente[]>(this.url);
    }

    create(cliente:Cliente): Observable<Cliente>{
        return this.http.post<Cliente>(this.urlcrear,cliente,{headers:this.httpHeaders});
    }
}

llamo al servicio en el crear.component.ts

import { Component, OnInit } from '@angular/core';
import { Cliente } from '../cliente/cliente';

import {ClienteService} from '../cliente/cliente.service';
import {Router} from '@angular/router';

@Component({
  selector: 'app-crear',
  templateUrl: './crear.component.html',
  styleUrls: ['./crear.component.css']
})
export class CrearComponent implements OnInit {

   public cliente:Cliente= new Cliente;

   public titulo:String="Crear Cliente"

  constructor(public clienteService:ClienteService ,
    private router:Router) { }

  ngOnInit(): void {
  }

  public create():void{
    this.clienteService.create(this.cliente).subscribe(
      response => this.router.navigate(['/listar'])
    )
  }

}

routerLink en los inputs

<div class="container">

    <div>
        <div class="row">
            <h1>{{titulo}}</h1>
        </div>
        <div class="form-group row">

            <label class="col-md-2">Nombre</label>
            <input class="col-md-6 form-control" type="text" [(ngModel)]="cliente.CLI_NOM">

        </div>
        <div class="form-group row">

            <label class="col-md-2">Apellido</label>
            <input class="col-md-6 form-control" type="text" [(ngModel)]="cliente.CLI_APELL">

        </div>
        <div class="form-group row">

            <label class="col-md-2">Email</label>
            <input class="col-md-6 form-control" type="text" [(ngModel)]="cliente.CLI_EMAIL">

        </div>
        <div class="row">

            <button class="btn-success" role="button" (click)="create()">Crear</button>

        </div>
    </div>

</div>

crea solo null

introducir la descripción de la imagen aquí

12
  • Ya probaste si la API funciona bien? insertando datos sin usar Angular.
    – Lobos
    Commented el 16 nov. 2020 a las 18:30
  • sí , lo probé con Postman y ingresa bien los datos
    – C Aldair
    Commented el 16 nov. 2020 a las 18:33
  • Y la petición generada por Angular lleva el formato y los datos correctos?
    – Lobos
    Commented el 16 nov. 2020 a las 19:08
  • si , la estoy heredando de mi clase cliente , ahora la acabo de agregar a la pregunta
    – C Aldair
    Commented el 16 nov. 2020 a las 19:11
  • El código se ve bien, has revisado la petición en el navegador en las herramientas de desarrollo?
    – Lobos
    Commented el 16 nov. 2020 a las 19:21

2 respuestas 2

0

puedes sacarnos de la duda a varios haciendo lo siguiente en tu servicio de creación. Agregando un console.log, con esto veríamos en la consola del navegador lo que estas enviando al endpoint de creación.

create(cliente:Cliente): Observable<Cliente>{
        console.log('cliente', cliente)
        return this.http.post<Cliente>(this.urlcrear,cliente,{headers:this.httpHeaders});
    }

Compartenos que muestra la consola y ya dependiendo de lo que veamos allí podríamos hacer un mejor diagnostico.

0

Spring te convierte el JSON a Java Object si las propiedades del JSON coincide con las de la clase Java. Como te han dicho arriba comprueba qué recibe y, para asegurar el casteo de forma correcta, añade esto dentro delante del objeto en la función: @ModelAttribute("nombreClase) . De esta forma le dices a Spring que debe recibir un objeto nombreClase.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.