在模态（UI Bootstrap）中传递给 ng-submit 的未定义表单

Question

我正在尝试实现modal 验证。我正在使用controller as modal 语法。关闭和提交功能按预期工作。不幸的是验证没有。传递给控制器​​提交函数的 loginForm 是undefined！由于这个问题，我无法执行用户名输入验证。

<form form="loginForm" class="registerModal"  ng-submit="modal.submit(loginForm)" novalidate> 
    <div class="modal-header">
        <h3 class="modal-title">TITLE</h3>
    </div>
    <div class="modal-body ">
        <div class="row form-horizontal">
            <div class="form-group" >
                <label class="col-sm-4 control-label">Username:<span style="color:red">*</span></label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" name="username" ng-model="modal.user.username" ng-maxlength="3" required>
                </div>
            </div>
            <div  uib-alert class="col-sm-offset-4 alert-danger" ng-show="loginForm.username.$error.required">Error Msg</div> 
    </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="submit" ng-click="modal.showErrors=true">Register</button>
        <button class="btn pull-left" type="button" ng-click="modal.cancel()">Cancel</button>
    </div>
</form>

Controller.js

angular.module('app')
.controller('RegistrationCtrl',['$uibModalInstance', function ($uibModalInstance) {

    var vm = this;
    vm.showErrors = false;

    //Modal
    vm.user = {
       username: 'default'
    };
    */
    /**********Submiting form**********/
    vm.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };

    vm.submit = function(form){
        console.log('submiting....');
        console.log(form);  //it is undefined
    };

}]);

如果有任何帮助，我将不胜感激。

Answer 1

应该是form name="loginForm"，而不是form form="loginForm"：

<form name="loginForm" class="registerModal" ng-submit="modal.submit(loginForm)" novalidate>