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. 它是使用ui-router的嵌入式視圖，但是只要該視圖本身可以工作，我認為這並不重要，我至少希望它觸發頁面提交。

任何建議表示感謝！

--Simon

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）您需要在控制器實例上設置函數（因為您正在使用controller 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>