简单的角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-提交= “$联系形式有效& & vm.submit（）。” 应该被提交给一个函数vm.submit（）我的ContactController内，如下所示：

(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已经被声明为这样，但是即使当我在提交函数里面放了一个alert，我什么也得不到。

在我route.js我有以下几点：

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

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

Answer 1

您错过了控制器中依赖关系的注入。在你的函数声明后添加这条注入语句：

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

此外，ng-submit使绑定角度表达式来提交事件。 contactForm。$ valid是一个真值检查，不是一个可以调用的函数。从中删除NG-提交，并添加NG-禁用=您的提交按钮，类似这样的“联系形式$有效！”：

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

和

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

这里的工作plunk与一些依赖关系（$ stamplay，Page，toastr和$ log）被剥离出来，以便我能够解决真正的问题。