Estoy tratando de enviar el formulario a backend por medio del método POST, pero resulta que no se envían, no sé por qué razón. Reviso la consola del navegador en la pestaña red y no se ejecuta tan si quiera el método POST y mucho menos se envían los parámetros.
¿Alguna idea de qué puedo estar haciendo mal? Cabe destacar que lo que estoy tratando de hacer es el envío del formulario a mi correo y eso ya lo logré pero no he podido traer el valor de los campos del formulario al backend para insertarlos en el correo.
import { Component } from '@angular/core';
import { MessageService } from '../services/message.service';
import swal from 'sweetalert';
@Component({
selector: 'app-contacto',
templateUrl: './contacto.component.html',
styleUrls: ['./contacto.component.css']
})
export class ContactoComponent {
constructor(public _MessageService: MessageService) {
}
contactForm(form) {
this._MessageService.sendMessage(form).subscribe(() => {
swal('Formulario de Contacto', 'Mensaje Enviado Correctamente', 'success');
});
}
}
<div class="d-flex flex-column align-items-center justify-content-center" id="contenedor-padre">
<img src="assets\img\imagen-conacto.jpg" alt="imagen de fondo" id="imagen-fondo">
<div class="row" id="fila-movil">
<div class="col-12" id="columna" >
<div class="d-flex justify-content-center" id="contenedor-imagen-movil"> <img src="assets\img\imagen-contacto.jpg" class="img-rounded" id="imagen-movil" alt="Cinque Terre"> </div>
</div>
</div>
<div class="row mt-4" id="fila">
<div class="col-md-12 col-sm-12 col-lg-7" id="columna-izquierda">
<div id="contenedor-formulario">
<form (ngSubmit)="contactForm(form.value)" #form="ngForm">
<fieldset>
<div class="row pt-5">
<div class="col-md-12" style="overflow: hidden;">
<legend class="text-center" id="titulo-formulario"> ¡Contáctame! </legend>
</div>
</div>
<div class="row pt-3">
<div class="col-md-6 col-12">
<input type="text" class="form-control" name="nombre" placeholder="Primer Nommbre">
</div>
<div class="col-md-6 col-12" id="padding-form">
<input type="text" class="form-control" name="apellido" placeholder="Primer Apellido">
</div>
</div>
<div class="row pt-3">
<input type="email" class="form-control" id="inputEmail4" name="correo" placeholder="Email">
</div>
<div class="row pt-3">
<textarea class="form-control" id="area-texto" rows="3" name="mensaje"></textarea>
</div>
<div class="row pt-3">
<div class="col-md-12 col-12">
<button type="submit" class="btn btn-primary" style="height: 20px; width: 100px;">Enviar</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="col-md-6 col-lg-5 col-6" id="columna-derecha"> <img src="assets\img\imagen-contacto.jpg" id="imagen-contacto"> </div>
</div>
</div>
- Servicio:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class MessageService {
constructor(private _http: HttpClient) { }
sendMessage(body) {
console.log('**** Servicio ****');
return this._http.post('http://localhost:3000/formulario', body);
}}
- Backend:
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const configMensaje = require('./configMensaje');
const app = express();
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(cors());
app.post('/formulario', (req, res) => {
console.log('AAPPPPPPPPPPP.JS');
console.log(req.body.nombre);
configMensaje(req.body);
res.status(200).send();
})
app.listen(3000, () => {
console.log('Servidor corriendo');
});
*Captura de la pestaña red:
- Captura de la consola:
- Ahora si se ejecuta el método POST pero no se envían los datos, aquí adjunto una captura. Alguna idea?
console.log('**** Servicio ****');
en la consola?