AngularJS表单提交未触发

时间:2015-01-06 00:52:13

标签: javascript html angularjs forms angular-ui-router

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

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

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

  3. ng-controller具有processForm功能

  4. 它是使用ui-router的嵌入式视图,但我认为只要视图本身有效,我至少会期望它触发页面提交。

    < / LI>

    感谢任何建议!

    - 西蒙

    HTML code:

    <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');
        }
    }
    })
    ();
    

    感谢您的帮助,

    西蒙

1 个答案:

答案 0 :(得分:1)

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

1)看起来您正在尝试使用控制器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)您需要在控制器实例上设置该功能(因为您使用的是控制器,否则需要在$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>