2016-07-06 9 views
0

私は連絡先フォームを作成しようとしていますが、サーバー側はかなりうまく動作しています。しかし、AngularをHTMLフォームに接続してExpressで送信する方法はわかりません。どなたでも助けていただければ幸いです。Express nodemailerを角で接続してください

マイエクスプレス

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

var data = req.query; 

var mailOptions = { 
    from: '[email protected]', // 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); 
}); 

})。

だから、私の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"> 

そして、主な問題は、HTMLおよびExpressで角度接着する方法を、ここにあります。私は電子メールを送ることができますが、名前、電子メールなどのフィールドでは定義されていません。 :

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) 
     }); 
    } 

}]);

答えて

0

私はこのリクエストをPOSTで始めるべきであり、GETリクエストではないと思います。

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

var data = req.body; 

var mailOptions = { 
    from: '[email protected]', // 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. 
}); 

ここで、角度コードを見てみましょう。オブジェクト$ scope.messageにフォームフィールドデータを保持させたいと思うようです。これをコントローラの冒頭でオブジェクトとして定義する必要があります。

<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"> 
+0

が答えてくれてありがとう:

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は1 ngのモデルは、メッセージオブジェクトに結合していませんでした!私はあなたが提案した改善を試しましたが、まだ私は "名前:未定義、電子メール:未定義...など"を取得します。あなたはなにか考えはありますか? – planacte

関連する問題