Question

我是网络新手，无法解决这个问题：

我有一个表单，我希望在表单无效时禁用提交按钮。我已经尝试过使用X. $ valid和X.checkValidity（）但没有任何帮助。我也看过铁形式的例子和文档，但我不能

我认为我的麻烦是使用Angular + Polymer，但我找不到如何获得我想要的行为的解决方案。

这是我的代码：

<form id="loginForm" novalidate>
  <paper-input ng-model="username" label="{{::tr('Enter a username')}}" required auto-validate error-message="{{::tr('Please enter your username')}}" ng-keyup="keyPress($event.keyCode)" ng-change="password = ''"></paper-input>
  <paper-input ng-model="password" label="{{::tr('Enter a password')}}" required auto-validate error-message="{{::tr('Please enter your password')}}" type="password" ng-keyup="keyPress($event.keyCode)"></paper-input>
  <div id="loginFailureReason"></div>
  <div class="pm4-form-footer">
    <paper-button raised ng-click="forgotPassword();" ng-enable="!loading">{{::tr('Forgot your password') }}</paper-button>
    <paper-button raised type="submit" ng-click="loginForm.$valid && login()" ng-enable="loginForm.$valid && !loading">{{::tr('Sign in')}}</paper-button>
  </div>
</form>

控制器代码：

loginApp.controller('LoginController', ["$scope", "$http", "$window","trFilter",
function ($scope, $http, $window, tr) {
    //Used to determine if to present the reset password form or not
    $scope.resettingPassword = false;
    //Used to determine if to present the reset code form or not
    $scope.submitResetCode = false;

    //Model fields that will be sent to server
    $scope.username = '';
    $scope.password = '';

    $scope.login = function () {
        $scope.loading = true;
        $('input[ng-model], select[ng-model]').each(function () {
            angular.element(this).controller('ngModel').$setViewValue($(this).val());
        });
        $http.post('/Account/DoLogin', { username: $scope.username, password: $scope.password }).
            success(function (data, status, headers) {
                if (headers('AccountCtrResponse') !== null && headers('AccountCtrResponse') === "Done") {
                    $window.location.replace("/" + $window.location.hash);
                } else {
                    $scope.logonFailureReason = tr("Login failed due to the following reason: " +headers('AccountCtrResponse'));
                    $scope.loading = false;
                }
            }).
            error(function () {
                $scope.logonFailureReason = "Failure in submitting the request. Try again later or report this if it persists.";
                $scope.loading = false;
            });
    };

Answer 1

如果我添加以下代码它可以工作，但我认为将该逻辑放在控制器中是不正确的。在html中：

$scope.formValidity = function () {
    return loginForm.checkValidity();
};

在控制器中：

formdata

Answer 2

尝试：

    <form name="loginForm" >
        <paper-input ng-model="username" label="{{::tr('Enter a username')}}" required auto-validate error-message="{{::tr('Please enter your username')}}" ng-keyup="keyPress($event.keyCode)" ng-change="password = ''"></paper-input>

        <paper-input ng-model="password" label="{{::tr('Enter a password')}}" required auto-validate error-message="{{::tr('Please enter your password')}}" type="password" ng-keyup="keyPress($event.keyCode)"></paper-input>
        <div id="loginFailureReason"></div>

        <div class="pm4-form-footer">
            <paper-button raised ng-click="forgotPassword();" ng-disabled="loading">{{::tr('Forgot your password') }}</paper-button>
            <paper-button raised type="submit" ng-click="login()" ng-disabled="!loginForm.checkValidity()">{{::tr('Sign in')}}</paper-button>
        </div>

    </form>

仅在纸张输入表格有效的情况下单击

2 个答案: