Question

我在Angular Js中的表格如下所示。

<form ng-submit="doLogin(loginForm.$valid);" novalidate>
    <input type="text" name="EmailAddress" ng-model="loginForm.EmailAddress" required/>
    <input type="password" name="Password" ng-model="loginForm.Password" required/>
    <button type="submit" ng-disabled="loginForm.$invalid">
        Login
    </button>
</form>

我已根据需要设置了文本框，但仍处于表单加载状态，按钮未显示已禁用，但代码已存在ng-disabled="loginForm.$invalid"。我错过了什么吗？

Answer 1

试试看这里

<body data-ng-app="testapp">
<div data-ng-controller="testCtrl">
     <h1>Test {{name}}!!</h1>

    <form name="loginForm" action="login" novalidate>
        <input type="email" name="email" ng-model="email" placeholder="email" required/>
        <input type="password" name="password" ng-model="passowrd" placeholder="password" required/>
        <button type="submit" ng-disabled="loginForm.$invalid">Login</button>
        <p ng-show="loginForm.$invalid">Please fix your form.</p>
        <p ng-show="loginForm.email.$invalid">Please fix your email.</p>
        <p ng-show="loginForm.password.$invalid">Please fix your password.</p>
    </form>
</div>
<script>
    var testapp = angular.module('testapp', []);
    var testCtrl = function($scope) {
        $scope.name = 'validation';
    };
</script>

信用：@Davin Tryon Angular JS form validation does not seem to work

Answer 2

您将模型（纯数据，即您的loginForm对象，包含输入的电子邮件地址和输入的密码）与由angular创建的表单控制器混淆，并包含$ valid，$ invalid等字段。

不要对这两个不同的东西使用相同的名称。我会重命名您的对象credentials（因为它不是表单），并且会使用loginForm作为实际表单（使用name属性）：

$scope.credentials = {};

----

<form name="loginForm" ng-submit="doLogin(loginForm.$valid);" novalidate>
    <input type="text" name="EmailAddress" ng-model="credentials.EmailAddress" required/>
    <input type="password" name="Password" ng-model="credentials.Password" required/>
    <button type="submit" ng-disabled="loginForm.$invalid">
        Login
    </button>
</form>

AngularJs中未禁用按钮提交

2 个答案: