2017-10-06 15 views
1

私はangularjsを初めて利用しています。私は簡単なログインページを作成しました。コードは正常に動作していますが、検証と資格情報には問題があります。私はいくつかのサイトでいくつかの手がかりを見つけましたが、それらの回答は私の解決策に適切な情報を提供していません。私が直面しているエラーは、バリデーションです。無効なmailidパスワードを入力すると、エラーメッセージがポップアップするはずです。しかし、私はそれを達成できませんでした。anglejsを使用したログインの検証と資格情報

HTML:

`<form ng-submit="loginform()" class="ng-scope ng-pristine ng-valid center" name="logform"><br/><br>` 

    <div class="form-group col-md-4"> 
    <label form="emailinput"><b>Email</b></label> 
     <input type="email" class="form-control" name="uname" id="emailinput" placeholder="[email protected]" ng-model="username" ng-pattern="emailFormat"> 
     <span ng-show="logform.uname.$dirty.username && loginform.uname.$invalid"></span> 
     <span style="color: Red" ng-show="logform.uname.$valid">* Email is required</span> 
     <span style="color: Red" ng-show="logform.uname.$error.username">* Invalid ID </span> 
    </div> 

    <div class="form-group col-md-4"> 
    <label form="pwdinput"><b>Password</b></label> 
     <input type="password" class="form-control" name="pwd" id="pwdinput" placeholder="*******" ng-model="password"> 
     <span style="color: red" ng-show="logform.pwd.$dirty && loginform.pwd.$invalid"></span> 
     <span ng-show="logform.pwd.$error.$valid">* Password is required</span> 
     <span ng-show="logform.pwd.$error.pwd">* Invalid Password</span> 
    </div> 
    <div class="col-md-4"> 
     <button type="cancel" class="btn" ng-click="toggle_cancel()">Cancel</button> 
     <button class="btn btn-primary" ng-click="submit()" ng-Disabled="logform.username.$dirty && loginform.username.$invalid || logform.pwd.$dirty && loginform.pwd.$invalid">Login</button> 
    </div> 

AngularJs:

`var app = angular.module('logapp',['toastr']);` 
     app.factory('authentication', function() { 
     return { 
     isAuthenticated: false, 
     user: null 
     } 
    }); 

app.controller('credientials', function($scope,toastr,authentication) { 
    $scope.loginform = function (username, password) { 
    if ($scope.username === '[email protected]' && $scope.password === '123') { 
     authentication.isAuthenticated = true; 
     $location.path("/home"); 
    } else { 
     toastr.error('Invalid username and password'); 
    } 
}; 
}); 

答えて

0

親切に下記のスニペットを読み、条件に基づいてsetValidity()にあなたのコードを変更します。

var app = angular.module('logapp', []); 
 
app.factory('authentication', function() { 
 
    return { 
 
    isAuthenticated: false, 
 
    user: null 
 
    } 
 
}); 
 

 
app.controller('credientials', function($scope, authentication) { 
 
    $scope.loginform = function(isValid) { 
 
    $scope.logform.uname.$setValidity("username", true); 
 
    $scope.logform.pwd.$setValidity("pwd", true); 
 
    if (isValid) { 
 
     if ($scope.username == '[email protected]' && $scope.password == '123') { 
 
     alert("success"); 
 
     authentication.isAuthenticated = true; 
 
     } else { 
 
     $scope.logform.uname.$setValidity("username", false); 
 
     $scope.logform.pwd.$setValidity("pwd", false); 
 
     } 
 
    } 
 

 
    }; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 

 
<body ng-app="logapp" ng-controller="credientials"> 
 
    <form ng-submit="loginform(logform.$valid)" class="ng-scope ng-pristine ng-valid center" name="logform" novalidate role="form"> 
 

 
    <div class="form-group col-md-4"> 
 
     <label form="emailinput"><b>Email</b></label> 
 
     <input type="email" class="form-control" name="uname" id="emailinput" placeholder="[email protected]" ng-model="username" ng-pattern="emailFormat" required> 
 
     <span style="color: Red" ng-show="logform.$submitted && logform.uname.$error.required">* Email is required</span> 
 
     <span style="color: Red" ng-show="logform.$submitted && logform.uname.$error.username">* Invalid ID </span> 
 
    </div> 
 

 
    <div class="form-group col-md-4"> 
 
     <label form="pwdinput"><b>Password</b></label> 
 
     <input type="password" class="form-control" name="pwd" id="pwdinput" placeholder="*******" ng-model="password" required> 
 
     <span ng-show="logform.$submitted && logform.pwd.$error.required">* Password is required</span> 
 
     <span ng-show="logform.$submitted && logform.pwd.$error.pwd">* Invalid Password</span> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <button type="cancel" class="btn" ng-click="toggle_cancel()">Cancel</button> 
 
     <button class="btn btn-primary" type="submit">Login</button> 
 
    </div> 
 
    </form> 
 
</body>