planacte planacte - 5 months ago 20
AngularJS Question

Connect Express nodemailer with Angular

I'm trying to make a contact form, and the server side is working pretty well. But I don't know how to connect Angular to the html form and send it with Express. Any would appreciate any help.

My Express

router.get('/sendQuote', function(req, res) {

var data = req.query;

var mailOptions = {
from: 'planacte@gmail.com', // sender address
name: data.contactName,
email: data.contactEmail,
to: data.email, // list of receivers
subject: "Request for a Quote from " + data.contactName, // Subject line
text: data.contactMsg, // plaintext body
html: '<p> email: ' + data.contactEmail +
'</p><p> phone: ' + data.contactPhone + '</p><br>'
+data.contactMsg // html body
};

console.log(mailOptions)

// send mail with defined transport object
transporter.sendMail(mailOptions, function(error, info){
if(error){
return console.log(error);
}
console.log('Message sent: ' + info.response);
});


});

So, my html:

<form id="contact" class="contact-form" ng-submit="sendMail()" novalidate>
<div class="message"></div>
<div class="col-md-5 col-sm-5 col-xs-12 animated hiding" data-animation="slideInLeft">
<div class="form-group">
<input type="text" name="name" class="nameform form-control input-lg" placeholder="name" ng-model="contactName" required>
</div>
<div class="form-group">
<input type="email" name="email" class="emailform form-control input-lg" placeholder="email" ng-model="message.contactEmail" required>
</div>
<div class="form-group">
<input type="text" name="phone" class="phoneform form-control input-lg" placeholder="phone" ng-model="message.contactPhone">
</div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
<div class="form-group">
<textarea name="message" class="messageform form-control input-lg" placeholder="custom text" ng-model="message.contactMsg" required></textarea>
</div>
</div>

<div class="col-md-7 col-sm-7 col-xs-12">
<input type="submit" class="btn btn-custom up form-button" value="Send Message">




And the main problem is here, how to glue Angular with HTML and Express. I can send emails, but get undefined in the fields of Name, Email and so on. :

app.controller('MainCtrl', ['$scope', '$interval', '$http', '$location', '$anchorScroll',
function($scope, $interval, $http, $location, $anchorScroll) {




$scope.sendMail = function () {
$scope.message = {};

$http.get('/send/sendQuote', $scope.message).
success(function(data, status, headers, config) {

// $scope.message = data.message;
console.log($scope.message)
});
}


}]);

Answer

I think you should start by making this request a POST and not a GET request.

router.post('/sendQuote', function(req, res) {

var data = req.body;

var mailOptions = {
    from: 'planacte@gmail.com', // sender address
    name: data.contactName,
    email: data.contactEmail,
    to: data.email, // list of receivers
    subject: "Request for a Quote from " + data.contactName, // Subject line
    text: data.contactMsg, // plaintext body
    html: '<p> email: ' + data.contactEmail + 
        '</p><p> phone: ' + data.contactPhone + '</p><br>' 
        +data.contactMsg // html body
};

console.log(mailOptions)

// send mail with defined transport object
transporter.sendMail(mailOptions, function(error, info){
    if(error){
        return console.log(error);
    }
    console.log('Message sent: ' + info.response);
    res.send(200); // let the client know it sent ok.
});

Now, let's take a look at your Angular code. It seems you want the object $scope.message to hold your form fields data. You should define this as an object at the beginning of your controller.

app.controller('MainCtrl', ['$scope', '$interval', '$http', '$location', '$anchorScroll', 
function($scope, $interval, $http, $location, $anchorScroll) {
  $scope.message = {};

  $scope.sendMail = function () {
    //$scope.message = {}; -- this was clearing the object

    $http.post('/send/sendQuote', $scope.message).
       success(function(data, status, headers, config) {
         // you can clear $scope.message if you want here
         // $scope.message = data.message;
         console.log($scope.message)
      });
  }
}]);

HTML had one ng-model not binding to the message object:

<form id="contact" class="contact-form" ng-submit="sendMail()" novalidate>
<div class="message"></div>
 <div class="col-md-5 col-sm-5 col-xs-12 animated hiding" data-animation="slideInLeft">
  <div class="form-group">
    <input type="text" name="name" class="nameform form-control input-lg" placeholder="name" ng-model="message.contactName" required>
  </div>
  <div class="form-group">
    <input type="email" name="email" class="emailform form-control input-lg" placeholder="email" ng-model="message.contactEmail" required>
  </div>
  <div class="form-group">
    <input type="text" name="phone" class="phoneform form-control input-lg" placeholder="phone" ng-model="message.contactPhone">
  </div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
  <div class="form-group">
    <textarea name="message" class="messageform form-control input-lg" placeholder="custom text" ng-model="message.contactMsg" required></textarea>
  </div>
</div>

<div class="col-md-7 col-sm-7 col-xs-12">
    <input type="submit" class="btn btn-custom up form-button" value="Send Message">