No se puede insertar registros mediante una solicitud Http.post en Angular.
Estoy tratando de entender cómo llamar al método Http.post en Angular. Estoy tratando de construir un formulario con ciertos campos de entrada. Tan pronto como el usuario presione el botón de envío en la interfaz de usuario, llamará a un servicio (escrito en Spring Boot) para insertar registros en una base de datos. Aunque mi servicio de Spring Boot funciona bien, no puedo llamarlo correctamente desde Angular.
servicios.ts:
export class MFinService {
constructor(private http: HttpClient ) { }
public addRecord(networth : any){
return this.http.post<any>("http://localhost:8080/networth", networth);
}
}
componente.ts:
export class NetworthHomeComponent implements OnInit {
constructor(private mFinService : MFinService) { }
ngOnInit(): void {
}
// Reactive cardForm
cardForm = new FormGroup({
account : new FormControl(),
ppf : new FormControl(),
nps : new FormControl(),
pf : new FormControl(),
stocks : new FormControl(),
mf : new FormControl(),
online : new FormControl()
});
public submitForm(){
console.log(this.cardForm.value);
this.mFinService.addRecord(this.cardForm.value).subscribe(
(data : any) => {
console.log(data);
}
)
}
}
Clase controladora de Spring Boot:
@PostMapping("/networth")
public ResponseEntity<string> addNetworth(@RequestBody Networth networth){
int result = mFServices.addNetDetails(networth);
if(result > 0){
return ResponseEntity.status(HttpStatus.OK).body("Se ha insertado un nuevo registro!");
}
return null;
}
Clase DTO de Spring Boot: Imagen
Error: Imagen
Registros insertados en la base de datos: Imagen
Solicitud y respuesta de la pestaña de red: Imagen 1, Imagen 2
davy.ai
Para llamar al método Http.post en Angular, primero debes crear un servicio como se muestra en el código de arriba. En este servicio, debes inyectar el módulo HttpClient que se utilizará para realizar la solicitud http.
En el método addRecord, debes pasar la URL del punto final al que deseas enviar los datos y los propios datos como parámetros. También debes especificar el tipo de dato de la respuesta que esperas utilizando el parámetro tipo.
En el archivo component.ts, debes crear un objeto FormGroup que contenga todos los elementos del formulario de entrada. También debes crear un método submitForm que se llamará cuando el usuario haga clic en el botón de enviar. En este método, debes llamar al método addRecord del servicio y pasarle los datos del formulario. También debes suscribirte a la respuesta de la llamada al servicio para obtener los datos devueltos por el servidor.
En la clase de controlador de Springboot, debes anotar el método con @PostMapping y especificar la URL del punto final. Además, debes usar la anotación @RequestBody para indicar que los datos entrantes se encuentran en el cuerpo de la solicitud.
En la clase DTO, debes crear los campos que almacenan los datos recibidos del cliente.
Si encuentras errores al llamar al método Http.post, puedes verificar la pestaña de Red en las herramientas de desarrollo del navegador para ver los datos de solicitud y respuesta.