Данные формы не отправляются в Angular

Question

Я уверен, что я пропустил что-то очень простое, но, пожалуйста, будьте терпеливы со мной, поскольку я новый кодер.

Я создал форму с использованием materializecss, но когда я нажимаю кнопку отправки, функция sendMail в контроллере не вызывается (и, следовательно, сообщение не отправляется). Кто-нибудь может мне помочь? Спасибо!

<div class="section white" id="prayerRequest"> 
    <div class="row"> 
    <div class="col s12 m12 l12"> 
     <h1 class="header center deepBrownT">Prayer Request</h1> 
    </div> 
    </div> 
    <div class="row"> 
    <form name="contactForm" ng-submit="Home.sendMail()" class="col s12"> 
    <div class="row"> 
     <div class="input-field col s6"> 
     <input type="text" class="validate" ng-model="Home.contactName"> 
     <label for="name">Name</label> 
     </div> 
     <div class="input-field col s6"> 
     <input type="email" class="validate" ng-model="Home.contactEmail"> 
     <label for="email">Email</label> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col s12"> 
     <div class="row"> 
     <div class="input-field col s12"> 
      <textarea class="materialize-textarea" ng-model="Home.contactMsg"></textarea> 
      <label for="textarea1">Prayer Request</label> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="center"> 
    <button class="btn waves-effect waves-light" type="submit">Submit 
     <i class="material-icons right">send</i> 
    </button> 
    </div> 
    </form> 
</div> 

Вот контроллер:

angular.module('theWell') 
    .controller('HomeController', HomeController) 

    HomeController.$inject = ['$location', '$anchorScroll', '$http'] 

    function HomeController ($location, $anchorScroll, $http) { 
    var vm = this; 

     vm.scrollTo = function(scrollLocation) { 
     $location.hash(scrollLocation); 
     $anchorScroll(); 
     } 

     vm.sendMail = function() { 
     var data = ({ 
      contactName : vm.contactName, 
      contactEmail : vm.contactEmail, 
      contactMsg : vm.contactMsg 
     }); 
     console.log(data) 
     // Simple POST request example (passing data) : 
     $http.post('http://localhost:3000/api/prayerRequest', data). 
      success(function(data, status, headers, config) { 
       // vm callback will be called asynchronously 
       // when the response is available 
       Materialize.toast('Thanks for your message ' + data.contactName + "." + " Our prayer team will be in conctact with you shortly"); 

      }). 
      error(function(data, status, headers, config) { 
       // called asynchronously if an error occurs 
       // or server returns response with an error status. 
      }); 

     }; 
    } 

Я знаю, что контроллер работает, потому что $ anchorScroll работает.

Благодарим за помощь!

Answer 1

Я считаю, что проблема может заключаться в том, что у вас есть недопустимый HTML. Попробуйте обновить HTML код до:

<div class="section white" id="prayerRequest"> 
    <div class="row"> 
    <div class="col s12 m12 l12"> 
     <h1 class="header center deepBrownT">Prayer Request</h1> 
    </div> 
    </div> 
    <div class="row"> 
    <form name="contactForm" ng-submit="Home.sendMail()" class="col s12"> 
     <div class="row"> 
     <div class="input-field col s6"> 
      <input type="text" class="validate" ng-model="Home.contactName"/> 
      <label for="name">Name</label> 
     </div> 
     <div class="input-field col s6"> 
      <input type="email" class="validate" ng-model="Home.contactEmail"/> 
      <label for="email">Email</label> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col s12"> 
      <div class="row"> 
      <div class="input-field col s12"> 
       <textarea class="materialize-textarea" ng-model="Home.contactMsg"></textarea> 
       <label for="textarea1">Prayer Request</label> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div class="center"> 
     <button class="btn waves-effect waves-light" type="submit">Submit 
      <i class="material-icons right">send</i> 
     </button> 
     </div> 
    </form> 
    </div> 
</div>