ngSubmit和ngDisabled不工作，但ngModel已绑定到控制器

ngSubmit and ngDisabled not working, but ngModel is bound to controller

本文关键字：ngModel 绑定 控制器 ngDisabled 工作 ngSubmit      更新时间：2023-09-26

这看起来与我在AngularJS中组合表单时通常会写的内容没有什么不同，但无论出于何种原因，ngSubmit都不起作用，当字段为空时，ngDisabled也不会禁用按钮。我把这个部分粘贴到一个新项目中，看看它是否只是由于其他一些依赖关系而发挥作用，但即使在修剪了脂肪之后，它仍然不起作用。有人能看到哪里出了问题吗？很明显，过了这么长时间，我自己就看不到了。

我使用控制器预加载了表单字段，以验证它们是否在说话，在绑定到ng模型的预标记中插入用户数据，因为我可以看到它在键入时更新，并且没有发生ng错误，即使查看Chromes角度插件，它看起来也很好。但是，在ngSubmit上永远不会调用login（），并且当所需字段为空时，按钮永远不会为ngDisabled。

问题的精简版本仍然不起作用：

<div ng-app="myApp">
    <div ng-controller="LoginController as loginCtrl">
        <form name="loginForm" role="form" ng-submit="loginCtrl.login()" novalidate></form>
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" class="form-control" id="username" name="username" ng-model="loginCtrl.user.username" required>
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" name="password" ng-model="loginCtrl.user.password" required>
        </div>
        <div class="form-group clearfix">
            <button type="submit" class="btn btn-primary btn-block" ng-disabled="loginForm.$invalid">Login</button>
        </div>
        <pre>user data = {{loginCtrl.user | json}}</pre>
        <pre>form invalid = {{loginForm.$invalid}}</pre> <!-- always says false... but it is invalid -->
        </form>
    </div>
</div>
<script>
(function() {
    'use strict';
    angular.module('myApp', [])
    .controller('LoginController', [function() { 
        var self = this;
        self.user = { username: 'asdf', password: 'asdf' };
        self.login = function() {
            console.log("hello world");
        };
    }]);
})();    
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

确保包含角度库。

https://docs.angularjs.org/misc/downloading

看看这些解决方案https://github.com/angular/angular.js/issues/2513

如果你想看我的工作表…

<div class="col-md-10">
    <form class="tab-pane active form-horizontal" id="first" name="userForm" novalidate ng-submit="save()">
        <h2>Sign up</h2>
        <div class="form-group" ng-class="{'has-error' : submitted && userForm.username.$invalid}">
            <label class="control-label col-md-3">UserName <span class="required">* </span> </label>
            <div class="col-md-4">
                <input type="text" name="username" class="form-control" ng-model="user.username" required placeholder="username"/>
            </div>
            <p ng-show=" submitted && userForm.email.$invalid" class="help-block">Username is required.</p>
        </div>
        <div class="form-group" ng-class="{'has-error' : submitted && userForm.email.$invalid}">
            <label class="control-label col-md-3">Email <span class="required">* </span> </label>
            <div class="col-md-4">
                <input type="email" name="email" class="form-control" ng-model="user.email" required placeholder="email"/>
            </div>
            <p ng-show=" submitted && userForm.email.$invalid" class="help-block">Email is required.</p>
        </div>
        <div class="form-group" ng-class="{'has-error' : submitted && userForm.password.$invalid}">
            <label class="control-label col-md-3">Password <span class="required">* </span> </label>
            <div class="col-md-4">
                <input type="text" name="password" class="form-control" ng-model="user.password" required placeholder="1.2"/>
            </div>
            <p ng-show="submitted && userForm.password.$error.required" class="help-block">Password is required.</p>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">Confirm Password </label>
            <div class="col-md-4">
                <input type="text" name="password_confirmation" class="form-control" ng-model="user.password_confirmation"
                       placeholder="password_confirmation"/>
            </div>
            <p ng-show="submitted && userForm.password_confirmation.$invalid" class="help-block">password_confirmation is required.</p>
        </div>

        <div class="form-group">
            <div class="pull-left">
                <a class="btn btn-default" href="/app/assets/images"> Back</a>
                <button type="submit" class="btn btn-primary" ng-click="submitted=true">Submit</button>
            </div>
        </div>

    </form>
</div>
相关文章：