AngularJS ng-minlength ng-required not working

Question

私はAngularJSで新しくなっています。私は設定したい最小長さ5のような入力のための検証と最大長は6です。

私は私のテキストボックスにだけを設定する必要があります。

現在、これは以下のように働いている私は、コードの下に使用していますが、それは

<div class="input-wrap lg-input"> 
    <input type="text" name="num" class="form-input" placeholder="Enter 5-6 digits" ng-minlength="5" maxlength="6" 
     ng-model="profInfo.Number" ng-required="true"> 
    <div class="error" ng-show="profInfoForm.$submitted || profInfoForm.num.$touched"> 
     <span ng-show="profInfoForm.num.$error.required">Required Field</span> 
     <span ng-show="profInfoForm.num.$error.minlength">Invalid input</span> 
    </div> 
</div> 
<div class="button-ctr"> 
    <button class="button" ng-class="profInfoForm.$valid ? 'active' : 'disable'">Next</button> 
</div> 

を動作していない。このため

：テキストボックスが空であると私は[次へ]ボタンをクリックしたとき、それは必須フィールドを

示します正しいエラーメッセージ。

6桁以上は正しく入力できません。

テキストボックスに1桁を入力してボタンをクリックすると、必須フィールドエラーメッセージが間違っていることが表示されます。

5桁目を入力すると、無効な入力エラーメッセージが間違っています。

私はAngularJS v1.5.5を使用しています。 ng-show="profInfoForm.$submitted || profInfoForm.num.$touched"

ng-show="(profInfoForm.num.$dirty || submitted)"へ

<input type="text" name="num" class="form-input" placeholder="Enter 5-6 digits" minlength="5" maxlength="6" ng-model="profInfo.Number" ng-required="true"> 
    <div class="error" ng-show="(profInfoForm.num.$dirty || submitted)"> 
     <span ng-show="profInfoForm.num.$error.required">Required Field</span> 
     <span ng-show="profInfoForm.num.$error.minlength">Invalid input</span> 
    </div> 
    </div> 

Answer 1

変更demo

Answer 2

1を見てください）これを試してみて -

<input type="text" name="num" class="form-input" placeholder="Enter 5-6 digits" ng-minlength="5" ng-maxlength="6" ng-model="profInfo.Number" required> 
    <div class="error" role="alert"> 
     <span ng-show="profInfoForm.num.$error.required">Required Field</span> 
     <span ng-show="profInfoForm.num.$error.minlength">Too Short!</span> 
     <span ng-show="profInfoForm.num.$error.maxlength">Too Long!</span> 
    </div> 

2）しかし、私は解決策の下にこれを好むだろう角型バリデーションのために。

<form role="form" name="FORMNAME" ng-submit="vm.submitForm(formData)" novalidate>   
    <div class="form-group form-md-line-input" ng-class="{ 'has-error' : FORMNAME.num.$invalid && !FORMNAME.num.$pristine}"> 
    <label class="col-md-3 control-label">Number <span style="color:red;">*</span></label> 
    <div class="col-md-8"> 
     <input type="text" class="form-control" name="num" ng-model="formData.number" placeholder="Enter 5-6 digits" ng-minlength="5" ng-maxlength="6" required> 
     <span class="help-block" ng-show="FORMNAME.num.$error.required">Please enter name</span> 
     <span class="help-block" ng-show="FORMNAME.num.$error.minlength">Too Short!</span> 
     <span class="help-block" ng-show="FORMNAME.num.$error.maxlength">Too Long!</span> 
    </div> 
    </div> 
</form> 

使用ブートストラップ「は、エラー」クラスとこれで、検証が失敗した場合、あなたの要素が赤に変わります、「持っているエラー」クラスは、コントロール・ラベル、フォーム・コントロールクラスで動作します。

"novalidate"はchrome html5検証をブロックします。