无法使用 Angular.js 显示错误消息

Question

当输入字段使用 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>

这里我只需要给出数字作为输入。 如果用户输入任何内容而不是数字，则应显示错误消息。 这里myError在输入字段上显示红色边框，该边框正确出现，但应显示的消息未出现。

Answer 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>

Answer 2

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>

无法使用 Angular.js 显示错误消息

问题描述

2 个解决方案

解决方案1
1 2016-08-24 06:41:12

解决方案2
0 2016-08-24 05:53:29

无法使用 Angular.js 显示错误消息

问题描述

2 个解决方案

解决方案1 1 2016-08-24 06:41:12

解决方案2 0 2016-08-24 05:53:29

解决方案1
1 2016-08-24 06:41:12

解决方案2
0 2016-08-24 05:53:29