0

ng-app と ng-controller を宣言すると、フォームは検証を行いません。

それらを削除すると、フォームは基本的な検証を行いますが、コントローラーロジックを使用してユーザー名とパスワードの検証とルーティングを実行したいのですが、これは使用できません (ng-controller が削除されているため)。

私は何が欠けていますか？

<html ng-app>
  <head>
    <title>My Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript"> 
    document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>
  <script>


<script>
var app = angular.module('myapp', []);
app.controller('loginCtrl', function($scope, $location){
$scope.loginCheck = function(){
var uname = $scope.user.name;
var pwd = $scope.user.password;
if ( uname == 'admin' && pwd =='admin123'){
window.location.hash='#/dashboard';
$location.path('/dashboard');
            }
            else $location.path('/about')
      };

});
</script>

<body>
    <h3  align="center">Loginn</h3>

        <form   name="form" class="login" ng-app='myapp' ng-controller = 'loginCtrl' >

<input placeholder="User Name"
       name="name" ng-model="user.name"  class="login-input" ng-model-options="{updateOn:'blur'}"
       required pattern=".{3,}" />
<div class="error-message" ng-show="form.name.$invalid && !form.name.$pristine">
    We need a name with 3 chars or more.
</div>

<br>

<input placeholder="E-mail"
       name="email" ng-model="user.email" class="login-input"  ng-model-options="{updateOn:'blur'}"
       required type="email"  />
<div class="error-message"
     ng-show="form.email.$invalid && !form.email.$pristine">
    We need a valid e-mail address.
</div>

<br>

<input type="password" class="login-input"  ng-model="user.password" name="uPassword" required placeholder='Password' ng-minlength="6" ng-maxlength="15" title="6 to 15 characters" />
<span class="error" ng-show="form.uPassword.$dirty && form.uPassword.$error.minlength">Too short</span>
<span ng-show="form.uPassword.$dirty && form.uPassword.$error.required">Password required.</span><br />

<input type="password" class="login-input"  ng-model="user.confirmpassword" name="ucPassword" required placeholder='Confirm Password' ng-minlength="6" ng-maxlength="15" title="6 to 15 characters" />
<span class="error" ng-show="form.ucPassword.$dirty && form.ucPassword.$error.minlength">Too short</span>
<span ng-show="form.ucPassword.$dirty && form.ucPassword.$error.required">Retype password.</span>
<div ng-show="(form.uPassword.$dirty && form.ucPassword.$dirty) && (user.password != user.confirmpassword)">
    <span>Password mismatched</span>
</div>

<br>

 <input type="submit"   value ="Submit "  ng-click="loginCheck()" ng-disabled="form.$invalid"/>

</form>



</body>

このフォームで ng-controller と ng-app を追加/指定するにはどうすればよいですか?

4

1 に答える 1

0

あなたのアプリには多くの問題があります:

  • 最初の行:<html ng-app>

remove 、コメントで述べたように、タグng-appは1つしか持てませんng-app

  • 2<script>連続 :

ここ ：

<script>
<script>
var app = angular.module('myapp', []);
  • JQuery は angular の前に挿入する必要があり、次のように挿入する必要があります。

ここ ：

<script src='//code.jquery.com/jquery-latest.min.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

以下の実際の例を見つけてください：

<html>

<head>
  <title>My Angular App</title>
  <script src='//code.jquery.com/jquery-latest.min.js'></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

  <script>
    var app = angular.module('myapp', []);
    app.controller('loginCtrl', function($scope, $location) {
      $scope.loginCheck = function() {
        var uname = $scope.user.name;
        var pwd = $scope.user.password;
        if (uname == 'admin' && pwd == 'admin123') {
          window.location.hash = '#/dashboard';
          $location.path('/dashboard');
        } else {
          $location.path('/about');
        }
      };
    });
  </script>
</head>

<body ng-app="myapp" ng-controller="loginCtrl">
  <form name="form" class="login">

    <input placeholder="User Name" name="name" ng-model="user.name" class="login-input" ng-model-options="{updateOn:'blur'}" required pattern=".{3,}" />
    <div class="error-message" ng-show="form.name.$invalid && !form.name.$pristine">
      We need a name with 3 chars or more.
    </div>


    <input placeholder="E-mail" name="email" ng-model="user.email" class="login-input" ng-model-options="{updateOn:'blur'}" required type="email" />
    <div class="error-message" ng-show="form.email.$invalid && !form.email.$pristine">
      We need a valid e-mail address.
    </div>


    <input type="password" class="login-input" ng-model="user.password" name="uPassword" required placeholder='Password' ng-minlength="6" ng-maxlength="15" title="6 to 15 characters" />
    <span class="error" ng-show="form.uPassword.$dirty && form.uPassword.$error.minlength">Too short</span>
    <span ng-show="form.uPassword.$dirty && form.uPassword.$error.required">Password required.</span>
    <br />

    <input type="password" class="login-input" ng-model="user.confirmpassword" name="ucPassword" required placeholder='Confirm Password' ng-minlength="6" ng-maxlength="15" title="6 to 15 characters" />
    <span class="error" ng-show="form.ucPassword.$dirty && form.ucPassword.$error.minlength">Too short</span>
    <span ng-show="form.ucPassword.$dirty && form.ucPassword.$error.required">Retype password.</span>
    <div ng-show="(form.uPassword.$dirty && form.ucPassword.$dirty) && (user.password != user.confirmpassword)">
      <span>Password mismatched</span>
    </div>
  </form>
</body>

于 2015-10-29T12:48:22.600 に答える