Question

当我将一个表单放在AngularJS中时，这看起来和我通常写的不同，但是无论出于什么原因，ngSubmit都不起作用，并且当字段为空时，ngDisabled不会禁用该按钮。我把这个部分粘贴到一个新项目中，看它是否因为其他一些依赖性而表现不佳，但即使修剪掉它之后它仍然无效。任何人都可以看到出了什么问题，很明显经过这段时间后我自己也不会看到它。

我使用控制器预加载表单字段以验证他们正在说话，将用户数据插入绑定到ng-model的预标签中，因为我可以看到它在我输入时更新，并且没有发生错误，甚至看着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>

Answer 1

确保包含角度库。

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>

ngSubmit和ngDisabled不起作用，但ngModel绑定到控制器

1 个答案: