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＆amp;＆amp; 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 =＆＃34;！contactForm。$ valid＆＃34;到你的提交按钮，如下：

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

和

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

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

简单的Angular JS联系表单未提交

1 个答案: