Angularjs ngMessages：如何在一条消息之后隐藏或显示另一条消息

我有以下代码：

<div id="messageArea">
   <div ng-messages="text1.$error">
      <div ng-message="required">
         Text1 is required ...
      </div>
   </div>
   <div ng-messages="text2.$error">
      <div ng-message="required">
         Text2 is required ...
      </div>
   </div>
   <div ng-messages="text3.$error">
      <div ng-message="required">
         Text3 is required ...
      </div>
   </div>
</div>
<div>Text1<input id="text1"  ng-model="text1" name="text1" ng-required="true"></div>
<div>Text2<input id="text2"  ng-model="text2" name="text2" ng-required="true"></div>
<div>Text3<input id="text3"  ng-model="text3" name="text3" ng-required="true"></div>

Text1是必需的。。。
文本2是必需的。。。
文本3是必需的。。。
文本1
文本2
文本3

---

我想一次显示一条错误消息。解决第一个错误后，将显示下一个错误消息。有人知道我该怎么做吗？谢谢。

你可以这样做

<div id="messageArea">
   <div ng-messages="number.$error">
   <div ng-message="required">
       Number is required ...
   </div>
</div>
<div ng-messages="text.$error" ng-if="!number.$error">
   <div ng-message="required">
      Text is required ...
   </div>
</div>

号码是必需的。。。
文本是必需的。。。

---

在这种情况下，仅当第一个消息块不存在时才显示第二个消息块（如果存在number.$errors，则隐藏该消息块）

如果使用ID将输入包装在表单标记中，则可以使用表单上的ng消息从所有输入中提取错误。您可以在此处看到：

如您所见，如果添加了更多验证类型，并且添加了更多需要验证的控件，则

ng show的大小将越来越大。
此示例（）使用以下解决方案：

<div ng-messages="my_form.first_name.$error" 
ng-if="interacted(my_form.first_name)">


$scope.submitted = false;
$scope.submit = function() {
  $scope.submitted = true;
};
$scope.interacted = function(field) {
  return $scope.submitted || field.$dirty;
};


$scope.submitted=false；
$scope.submit=函数（）{
$scope.submitted=true；
};
$scope.interactited=函数（字段）{
返回$scope.submitted | |字段。$dirty；
};
可能太晚了，但这是我的解决方案，使用ng messages multiple来显示一条或多条消息，并遵守验证消息的顺序：

<form name="loginForm" ng-submit="login()">
 <label>Email</label>
    <input required name="email" type="email" ng-model="email">
    <div ng-messages="loginForm.email.$error" ng-show="loginForm.email.$dirty && loginForm.email.$invalid" ng-messages-multiple>
         <div ng-message="required">El email es requerido!</div>
         <div ng-message="email">El email debe cumplir con el formato: email@dominio.com!</div>
    </div>
  <label>Contraseña</label>
    <input required name="password" type="password" ng-model="password" ng-pattern="passwordPattern" md-maxlength="12">
    <div ng-messages="loginForm.password.$error" ng-show="loginForm.password.$dirty && loginForm.password.$invalid">
         <div ng-message="required">La contraseña es requerida!</div>
         <div ng-message="pattern">Se requieren de 6 a 12 caracteres, por lo menus un dígito, una letra mayuscula y una minúscula</div>
    </div>
  <div layout="row"  layout-align="center center">
    <button ng-disabled="loginForm.$invalid>Login</button>
  </div>
</form>


电子邮件
El email是Requeriedo！
电子邮箱debe cumplir con电子格式：email@dominio.com!
康瑟斯尼娜
反兴奋剂！
这是一个12个字符的要求，是一个简单的数字，是一个简单的数字
很好的解决方案是使用CSS和ng类


var-app=angular.module（'app'，['ngMessages']）
。错误包装器{
颜色：红色；
}
.error wrapper>.view{
显示：块；
}
.error wrapper>.view~.view{
显示：无；
}

文本1必填项
文本2必填项
文本3必填项
提交
如果您不希望在页面加载时显示，但希望在页面提交或更改值时显示，请使用

<form name="frmSome">


  <div ng-messages="userDetails.$error"
       ng-if='frmSome.userName.$dirty || frmSome.$submitted'>
       <span ng-message="required">Name is Required</span>
       <span ng-message="maxlength">Max. 100</span>
  </div>
  <input name="userName" type="text" 
         ng-model="model.name" 
         ng-required='true' 
         ng-maxlength="30" />
  ..............................
  ..............................
  <input type='submit' value='Submit' />
</form>


名称是必需的
最多100
..............................
..............................


如果触摸文本框，它将是“脏的”
如果尝试提交页面“已提交”
它适用于名称而不是模型
谢谢您的回复。但这不起作用。只会显示第一条消息。当第一条消息消失时，第二条消息不会显示。您如何处理有四个必填字段的情况。您的示例没有给出关于哪个是哪个的任何信息。我认为无法识别在
ng消息中出现错误的控件。我能想到的唯一方法是使用ng-if一次显示一个ng消息块。如果有更多字段，我们如何处理？给！之前&！第二次加时赛之前看起来并不整洁，尽管它确实做到了
<form name="loginForm" ng-submit="login()">
 <label>Email</label>
    <input required name="email" type="email" ng-model="email">
    <div ng-messages="loginForm.email.$error" ng-show="loginForm.email.$dirty && loginForm.email.$invalid" ng-messages-multiple>
         <div ng-message="required">El email es requerido!</div>
         <div ng-message="email">El email debe cumplir con el formato: email@dominio.com!</div>
    </div>
  <label>Contraseña</label>
    <input required name="password" type="password" ng-model="password" ng-pattern="passwordPattern" md-maxlength="12">
    <div ng-messages="loginForm.password.$error" ng-show="loginForm.password.$dirty && loginForm.password.$invalid">
         <div ng-message="required">La contraseña es requerida!</div>
         <div ng-message="pattern">Se requieren de 6 a 12 caracteres, por lo menus un dígito, una letra mayuscula y una minúscula</div>
    </div>
  <div layout="row"  layout-align="center center">
    <button ng-disabled="loginForm.$invalid>Login</button>
  </div>
</form>

<form name="frmSome">


  <div ng-messages="userDetails.$error"
       ng-if='frmSome.userName.$dirty || frmSome.$submitted'>
       <span ng-message="required">Name is Required</span>
       <span ng-message="maxlength">Max. 100</span>
  </div>
  <input name="userName" type="text" 
         ng-model="model.name" 
         ng-required='true' 
         ng-maxlength="30" />
  ..............................
  ..............................
  <input type='submit' value='Submit' />
</form>