javascript - AngularJS 表单提交未触发

Question

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

1. 表单有 ng-submit="vm.processForm()"

2. <input type="button" value="Submit" id="submitjobform_submit" class="btn btn-danger">

3. ng-controller有processForm功能

4. 它是一个嵌入 View ，使用 ui-router但我认为这并不重要，只要 View 本身有效，我至少会期望它触发页面提交。

任何建议，不胜感激!

--西蒙

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>

Controller 代码:

(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"才能让submit事件获取在表单上触发，这就是 ng-submit 指令监听的内容。这样做:

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

3)您需要在 Controller 实例上设置该函数(因为您使用的是 Controller ，否则需要在 $scope 上设置该函数，并在 View 上进行适当的更改)，即:

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>