2

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:

consola

  • Captura de la consola:

captura de consola

  • Ahora si se ejecuta el método POST pero no se envían los datos, aquí adjunto una captura. Alguna idea?

captura del método POST

9
  • ¿Se te llega a mostrar el log console.log('**** Servicio ****'); en la consola? el 25 ene. 2019 a las 16:19
  • Si amigo, si se muestra. Lo coloque precisamente para ver si se estaba ejecutando ese código y si. Es que de hecho el formulario se envía a mi correo pero vació porque no me están llegando los valores de los campos al backend.
    – JulianProg
    el 25 ene. 2019 a las 16:21
  • No me cuadra que no se mande nada... puedes poner lo que te sale en consola después de pulsar el submit? ¿Por qué no se ve el texto del botón? has probado a depurar el código poniendo un breakpoint en el servicio? el 25 ene. 2019 a las 16:30
  • Listo. Acabo de subir una captura de la consola.
    – JulianProg
    el 25 ene. 2019 a las 16:33
  • Es raro: http.post no se ejecuta si no estás suscrito, es lazy, pero en tu caso hay una suscripción, no entiendo por qué no se hace la request... el 25 ene. 2019 a las 16:56

1 respuesta 1

0

Necesitas poner ngModel en cada input, por ejemplo

<input type="text" class="form-control" name="nombre" placeholder="Primer Nommbre" ngModel>

recuerda tener el FormModule importado en tu AppModule o FeatureModule

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.