ng Klick nur dort, wo Papier-Eingabeformular gültig ist

Question

ich auf dem Web neu bin und diese heraus nicht verstehen kann:

Ich habe ein Formular, dass ich den Submit-Button deaktiviert werden soll, während die Form ungültig. Ich habe versucht, die X. $ gültig und die X.checkValidity(), aber ohne Hilfe. Ich habe auch die Eisenform Beispiele und Dokumentation, aber ich kann nicht

Ich nehme an, mein Problem ist die Verwendung von Angular + Polymer, aber ich kann keine Lösung finden, wie das Verhalten, das ich will.

hier ist mein Code:

<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>

-Code des Controllers:

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

Wenn ich hinzufügen t Der folgende Code funktioniert, aber ich denke, es ist falsch, diese Logik in den Controller zu setzen. Im html:

<paper-button id="submitionButton" raised type="submit" ng-disabled="!formValidity()"> 
    {{::tr('Sign in')}} 
</paper-button> 

In der Steuerung:

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

Answer 2

Versuchen:

<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>