javascript - 表单数据未在 Angular 中提交

Question

我确信我忽略了一些非常简单的事情，但请耐心等待，因为我是一名新编码员。

我已经使用materializecss创建了一个表单，但是当我单击提交按钮时， Controller 中的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>

这是 Controller :

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

      };
  }

我知道 Controller 可以工作，因为 $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>