2016-06-24 19 views
2

以下のコードでは、角度がminLengthまたはmaxLengthのエラーを上げていないようです...しかし、必要なエラー(電子メールのエラーと同様)はうまくいきます。入力ボックスがCSSを変更しているため、ng-minlengthとng-maxlengthが動作しています。 <span>内のテキストは、最小または最大エラーでは機能しません。ここで間違ってしまっているものでng-minlength角型検証

<section class="row" data-ng-controller="AuthenticationController"> 
<h3 class="col-md-12 text-center">Sign Up</h3> 
<div class="col-xs-offset-2 col-xs-8 col-md-offset-5 col-md-2"> 
    <form name="userForm" data-ng-submit="userForm.$valid &amp;&amp; signup()" class="signin form-validate" novalidate autocomplete="off"> 
     <fieldset> 
      <div class="form-group"> 
       <span ng-show="userForm.email.$dirty &amp;&amp; userForm.email.$error.required" class="text-danger">This field is required</span> 
       <span ng-show="userForm.email.$dirty &amp;&amp; userForm.email.$error.email" class="text-danger">This field must be a valid email address</span> 
      </div> 
      <div class="form-group"> 
       <label for="username" class="control-label">Username</label> 
       <input type="text" id="username" name="username" class="form-control" data-ng-model="credentials.username" placeholder="Username"> 
      </div> 
      <div class="form-group"> 
       <label for="password" class="control-label">Password</label> 
       <input type="password" id="password" name="password" class="form-control" required data-ng-model="credentials.password" ng-minlength="8" ng-maxlength="24" placeholder="Password"> 
       <span ng-show="userForm.password.$dirty &amp;&amp; userForm.password.$error.required" class="text-danger">This field is required</span> 
       <span ng-show="userForm.password.$dirty &amp;&amp; userForm.password.$error.minLength" class="text-danger">Please use a password of at least 8 characters</span> 
       <span ng-show="userForm.password.$dirty &amp;&amp; userForm.password.$error.maxLength" class="text-danger">The charactar limit for passwords is 24</span> 
      </div> 
      <div class="text-center form-group mt"> 
       <button type="submit" class="btn btn-large btn-primary">Sign up</button>&nbsp; or&nbsp; 
       <a href="/#!/page/signin" class="show-signup">Sign in</a> 
      </div> 
      <div data-ng-show="error" class="text-center text-danger"> 
       <strong data-ng-bind="error"></strong> 
      </div> 
     </fieldset> 
    </form> 
</div> 

任意の考え:

は、以下のパスワード入力を参照してください?

答えて

1

それだけで構文エラーだった:userForm.password.$error.minLengthuserForm.password.$error.minlengthされている必要があります(大文字)。

0

&amp;&amp;から&&ng-showの式に変更する必要があります。コンソールでエラーが発生している必要があります。

更新されたng-showのバージョンは、次のようになります。

ng-show="userForm.password.$dirty && userForm.password.$error.required" 

他のより便利な方法は、フォーム&をもとに検証メッセージを表示し、非表示にするには、ng-messagesディレクティブを使用することで、そのフィールドの妥当性

+0

ちょっとPankaj、私はちょうど&&を使ってみましたが、振る舞いには何の変化もありませんでした。私はまた、&を使用してコンソールでエラーを取得していません。今、ng-messagesディレクティブを試してみます。 –

+0

ああ男... minLengthではないminLength –

+0

@BenBrook上記のHTMLで正しいことがわかります。 –

関連する問題