简单的 Angular JS 联系表未提交

Question

我正在制作一个简单的联系表格，这让我抓狂。 HTML 就这么简单：

<form name="contactForm" ng-submit="contactForm.$valid && vm.submit()" novalidate>
                <div class="form-group">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <input type="text" placeholder="Full name" name="name" ng-minlength="1" max="20"
                               ng-model="vm.data.name" id="name" class="form-control" required>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <input type="email" ng-minlength="1" placeholder="Email address" name="contactemail"
                               ng-model="vm.data.contactemail" class="form-control" required>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <input type="text" ng-model="vm.data.subject" name="subject" ng-minlength="1" id=""
                               placeholder="Subject" class="form-control" required>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <textarea class="form-control" ng-model="vm.data.message" name="message" ng-minlength="1"
                                  placeholder="Your message"></textarea>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <input type="submit" class="btn btn-primary" />
                    </div>
                </div>
            </form>

ng-submit="contactForm.$valid && vm.submit()" 应该提交到我的 ContactController 中的函数 vm.submit()，如下所示：

(function() {
  'use strict';

  angular
  .module('xyz')
  .controller('ContactController', ContactController);

  /** @ngInject */
  function ContactController($rootScope,$stamplay,Page,toastr,$log) {
  alert('BOO!');

var vm = this;
vm.data = {};

$rootScope.data = vm.data;

vm.submit = function (){
  alert('BOO!');
  $stamplay.Object("contact")
  .save(vm.data)
  .then(onSuccess, onError);
};

var onSuccess = function () {
  toastr.success('Your message has been delivered!');
};

var onError = function () {
  toastr.error('Seems to be a problem');
};

$rootScope.Page = Page;
Page.setTitle('WHDS | Contact');
Page.setDescription('How to contact us here at the surgery');

// FOR DEV

$log.info($rootScope);
}

})();

vm 已经这样声明了，但是即使我在提交函数中放置了一个警报，我什么也得不到。

在我的 route.js 中，我有以下内容：

.when('/contact', {
    templateUrl: 'app/contact/contact.html',
    controller: 'ContactController',
    controllerAs: 'vm'
    })

哪个是正确的模板、控制器名称和控制器。所有这些看似正确，我不明白为什么表单不会提交。任何想法表示赞赏。谢谢

Answer 1

您缺少在控制器中注入依赖项。在你的函数声明之后添加这个注入语句：

ContactController.$inject=['$rootScope', '$stamplay', 'Page', 'toastr', '$log'];

此外，ng-submit 允许将角度表达式绑定到 onsubmit 事件。 contactForm.$valid 是一个真实的检查，而不是一个可以调用的函数。从 ng-submit 中删除它并将 ng-disabled="!contactForm.$valid" 添加到您的提交按钮，如下所示：

<form name="contactForm" ng-submit="vm.submit()" novalidate>

和

<input type="submit" class="btn btn-primary" ng-disabled="!contactForm.$valid"/>

这是一个有效的plunk，其中删除了一些依赖项（$stamplay、Page、toastr 和 $log），以便我可以解决真正的问题。