表單數據未在 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>