2016-08-24 9 views
3

問題があります。 Angular.jsを使用して入力フィールドに無効なデータが入力されているときに、エラーメッセージを表示できませんでした。私は以下の私のコードを説明しています。\ユーザー.IF入力が数ではなく、何も入力されてここでAngular.jsを使用してエラーメッセージを表示できません

<form name="billdata" id="billdata" enctype="multipart/form-data" novalidate> 
    <div ng-class="{ 'myError': billdata.type.$touched && bill data.type.$invalid }"> 
     <input type="number" class="form-control oditek-form" ng-model="type" name="type" step="1" min="0" placeholder="Add Type" ng-pattern="/^[0-9]+([,.][0-9]+)?$/"> 
    </div> 
    <div class="help-block" ng-messages="billdata.type.$error" ng-if="billdata.type.$touched"> 
     <p ng-message="pattern" style="color:#F00;">This field needs only number(e.g-0,1..9).</p> 
    </div> 
</form> 

私はそれがmessage.Here myErrorは、入力上の赤色の境界線を示しているエラーが表示されますのみ番号を与える必要がフィールドは正しく来ていますが、メッセージは表示されません。私を助けてください。

+0

はplzはあなたの答えをマークし、次のようにする必要があります。 –

答えて

0

ng-messages divが回答を以下のいずれかが助けた場合

<div ng-messages="billdata.type.$error" ng-show="billdata.type.$touched"> 
    <div ng-message when="pattern"> 
    <span>This field needs only number(e.g-0,1..9).</span> 
    </div> 
</div> 
+0

これで問題を解決しましたか? –

+0

あなたはng-messagesとangularのバージョンを教えていただけますか? – Rakeschand

+0

また、この回答を参照してくださいhttp://stackoverflow.com/questions/24407720/using-ngmessage-for-input-type-number – Rakeschand

1

<html> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <div ng-app=""> 
 
    <form name="myForm">  
 
    For Text <input name="myName" ng-model="myName" ng-pattern="/^[a-zA-Z ]+$/" required>  
 
    <span style="color: red" ng-show="myForm.myName.$error.required">First Name is required.</span>                  <span style="color: red" ng-show="myForm.myName.$error.pattern">Any other symbol are not allow.</span> 
 
     
 
    <br /> 
 
     For Number 
 
     
 
     <input type="number" class="textbox_usr" name="txtmobno" id="txtmobno" ng-model="txtmobno" ng-minlength="10" ng-maxlength="10" required /><br /> 
 
                  <span style="color:red" ng-show="myForm.txtmobno.$dirty && myForm.txtmobno.$invalid"> 
 
                   <span ng-show="myForm.txtmobno.$error.required || myForm.txtmobno.$error.number">Valid Mobile number is required</span> 
 
                   <span ng-show="((myForm.txtmobno.$error.minlength || myForm.txtmobno.$error.maxlength) && myForm.txtmobno.$dirty) ">Mobile number should be 10 digits</span> 
 
                  </span> 
 
    </form> 
 
     </div>

関連する問題