AngularJS 表单提交未触发

Question

我似乎无法理解为什么以下内容没有触发表单提交。

表格有ng-submit="vm.processForm()"
<input type="button" value="Submit" id="submitjobform_submit" class="btn btn-danger">
ng-controller 具有 processForm 函数
它是一个使用 ui-router 的嵌入式视图，但我认为这并不重要，只要视图本身有效，我至少希望它触发页面提交。

非常感谢任何建议！

--西蒙

HTML代码：

<section class="mainbar">
<section class="matter">
    <div class="container">
        <div class="row">
            <div class="widget wviolet">
                <div ht-widget-header title="{{vm.title}}"></div>
                <div class="widget-content user">
                    <form name="submitjobform" novalidate ng-controller="SubmitJobController" class="form-horizontal" id="submitjobform" ng-submit="vm.processForm()">

                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">Name</label>
                            <div class="col-sm-10">
                                <input ng-model="formData.name" type="text" class="form-control" name="name" ngRequired="true" >
                                <span class="error" ng-show="submitjobform.name.$error.required">
                                    Required!</span>
                                </div>
                            </div>



                            <div class="form-group">
                                <label for="description" class="col-sm-2 control-label">Description</label>
                                <div class="col-sm-10">
                                    <textarea  ng-model="formData.description" class="form-control" name="description" ngRequired="true" >
                                    </textarea>
                                    <span class="error" ng-show="submitjobform.description.$error.required">
                                        Required!</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="category" class="col-sm-2 control-label">Category</label>
                                    <div class="col-sm-10">
                                        <input type="text" ng-model="formData.category" class="form-control" name="category" ngRequired="true" >
                                        <span class="error" ng-show="submitjobform.category.$error.required">
                                            Required!</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="status" class="col-sm-2 control-label">Assignee</label>
                                        <div class="col-sm-10">
                                            <select ng-model="formData.assignee" class="form-control" name="assignee" ngRequired="true" ng-options="name.name for name in vm.names">
                                            </select>
                                            <span class="error" ng-show="submitjobform.assignee.$error.required">
                                                Required!</span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-2">
                                                <input type="button" value="Submit" id="submitjobform_submit" class="btn btn-danger">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="widget-foot">
                                    <div class="clearfix"></div>    
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </section>

控制器代码：

(function () {
'use strict';

angular
.module('app.submitjob')
.controller('SubmitJobController', SubmitJobController);

SubmitJobController.$inject = ['logger'];
/* @ngInject */
function SubmitJobController(logger) {
    var vm = this;
    vm.title = 'Complete the fields below and hit submit to create a new job';
    vm.names = [
    {name:'Kishori', role:'child'},
    {name:'Zen', role:'child'},
    {name:'Simon', role:'parent'},
    {name:'Nam', role:'parent'}
    ];


    activate();

    function processForm() {
        logger.info('awesome!');
    };

    function activate() {
        logger.info('Activated Submit Job View');
    }
}
})
();

感谢您的帮助，

西蒙

Answer 1

您的代码存在各种问题：-

1) 似乎您正在尝试使用 controller As 语法，在这种情况下，您需要在 ng-controller 指令中指定它。即：ng-controller="SubmitJobController as vm"。看起来您正在尝试访问前缀为 vm 的属性（如果不是，您必须在 $scope 上设置）

2) 输入类型 type="button" 不会触发表单提交，您需要将其更改为 type="submit" 以便在表单上触发提交事件，这就是 ng-submit 指令监听。也一样：

<input type="submit" value="Submit" id="submitjobform_submit" class="btn btn-danger">

3) 您需要在控制器实例上设置函数（因为您正在使用控制器 as，否则需要在 $scope 上设置并在视图上进行适当的更改），即：

this.processForm = function() {
  logger.info('awesome!');
};

而不是

function processForm(){...}

4) 您需要先创建模块（一次）才能获取它。在你的情况下更改：

 angular.module('app.submitjob').controller...

至

 angular.module('app.submitjob', []).controller...

演示

(function() {
  'use strict';

  angular
    .module('app.submitjob', [])
    .controller('SubmitJobController', SubmitJobController);

  SubmitJobController.$inject = ['$log'];
  /* @ngInject */
  function SubmitJobController(logger) {
    var vm = this;
    vm.title = 'Complete the fields below and hit submit to create a new job';
    vm.names = [{
      name: 'Kishori',
      role: 'child'
    }, {
      name: 'Zen',
      role: 'child'
    }, {
      name: 'Simon',
      role: 'parent'
    }, {
      name: 'Nam',
      role: 'parent'
    }];


    activate();

    this.processForm = function() {
      logger.info('awesome!');
    };

    function activate() {
      logger.info('Activated Submit Job View');
    }
  }
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section class="mainbar" ng-app="app.submitjob">
  <section class="matter">
    <div class="container">
      <div class="row">
        <div class="widget wviolet">
          <div ht-widget-header title="{{vm.title}}"></div>
          <div class="widget-content user">
            <form name="submitjobform" novalidate ng-controller="SubmitJobController as vm" class="form-horizontal" id="submitjobform" ng-submit="vm.processForm()">

              <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                  <input ng-model="formData.name" type="text" class="form-control" name="name" ngRequired="true">
                  <span class="error" ng-show="submitjobform.name.$error.required">
                                    Required!</span>
                </div>
              </div>



              <div class="form-group">
                <label for="description" class="col-sm-2 control-label">Description</label>
                <div class="col-sm-10">
                  <textarea ng-model="formData.description" class="form-control" name="description" ngRequired="true">
                  </textarea>
                  <span class="error" ng-show="submitjobform.description.$error.required">
                                        Required!</span>
                </div>
              </div>
              <div class="form-group">
                <label for="category" class="col-sm-2 control-label">Category</label>
                <div class="col-sm-10">
                  <input type="text" ng-model="formData.category" class="form-control" name="category" ngRequired="true">
                  <span class="error" ng-show="submitjobform.category.$error.required">
                                            Required!</span>
                </div>
              </div>
              <div class="form-group">
                <label for="status" class="col-sm-2 control-label">Assignee</label>
                <div class="col-sm-10">
                  <select ng-model="formData.assignee" class="form-control" name="assignee" ngRequired="true" ng-options="name.name for name in vm.names">
                  </select>
                  <span class="error" ng-show="submitjobform.assignee.$error.required">
                                                Required!</span>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-2">
                  <input type="submit" value="Submit" id="submitjobform_submit" class="btn btn-danger">
                </div>
              </div>
            </form>
          </div>
          <div class="widget-foot">
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </div>
  </section>
</section>

AngularJS 表单提交未触发

AngularJS Form Submit not firing

html

javascript

forms

angularjs

angular-ui-router