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