Question

我正在尝试使用ng-show属性显示两个以上的验证消息在文本字段中输入输入时，它会同时显示两条消息

<input type="text" name="Contact_Person" class="form-control" ng-model="Facility.Contact_Person" ng-required="true" ng-pattern="/^[a-zA-Z\s]*$/">
<span class="error" ng-show="profileform.Contact_Person.$invalid && profileform.Contact_Person.$dirty">Please enter the Contact Person</span>
<span class="error" ng-show="profileform.Contact_Person.$invalid && profileform.Contact_Person.$dirty &&  profileform.Contact_Person.$error.pattern ">Contact Person accepts only characters</span>

Answer 1

您可以使用$error.required和$error.pattern根据有效错误的类型分隔显示错误消息。

请注意，其中任何一个失败都会导致$invalid失败。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <form name="profileform">
    <input type="text" name="Contact_Person" class="form-control" ng-model="Facility.Contact_Person" ng-required="true" ng-pattern="/^[a-zA-Z\s]*$/">
    <span class="error" ng-show="profileform.Contact_Person.$error.required && profileform.Contact_Person.$dirty">Please enter the Contact Person</span>
    <span class="error" ng-show="profileform.Contact_Person.$error.pattern && profileform.Contact_Person.$dirty &&  profileform.Contact_Person.$error.pattern ">Contact Person accepts only characters</span>
  </form>
</div>

Answer 2

像这样更改您的代码。

<span class="error" ng-show="!profileform.Contact_Person.$dirty">Please enter 
the Contact Person</span>

<span class="error" ng-show="profileform.Contact_Person.$invalid  && 
 profileform.Contact_Person.$error.pattern">Contact Person accepts only 
 characters</span>

Answer 3

您可以使用ng-message指令

<div ng-class="{ 'has-error': profileform.Contact_Person.$touched && profileform.Contact_Person.$invalid }">
    <input type="text" class="form-control" name="Contact_Person" ng-model="Facility.Contact_Person" ng-maxlength="35" ng-required="true" />
    <div ng-if="profileform.Contact_Person.$touched && profileform.Contact_Person.$invalid" ng-messages="profileform.Contact_Person.$error" class="error">
        <span ng-message="required">Please enter Contact Person Name.</span>
        <span ng-message="pattren">Contact Person accepts only characters.</span>
    </div>
</div>

Answer 4

<强>样本

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <form name="profileform">
<input type="text" name="Contact_Person" class="form-control" ng-model="Facility.Contact_Person" ng-required="true" ng-pattern="/^[a-zA-Z\s]*$/">
<span class="error" ng-show="profileform.Contact_Person.$invalid && profileform.Contact_Person.$error.required">Please enter the Contact Person</span>
<span class="error" ng-show="profileform.Contact_Person.$invalid && profileform.Contact_Person.$error.pattern">Contact Person accepts only characters</span>
  </form>
</div>

＆＃13;

如何显示两个以上的ng-show消息

4 个答案: