Question

我有以下代码：

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

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

Answer 1

很好的解决方案是使用CSS和ng-class

＆＃13;

var app = angular.module('app', ['ngMessages']);

＆＃13;

.error-wrapper {
    color: red;
}

.error-wrapper > .view {
    display: block;
}

.error-wrapper > .view ~ .view{
    display: none;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.4.7/angular-messages.min.js"></script>
</head>

<body ng-app="app">
    <form ng-submit="createWallet()" name='testForm' novalidate>
        <div>
            <input ng-model='text1' type="text" name='text1' placeholder='text1' required>
        </div>
        <div>
            <input ng-model='text2' type="text" name='text2' placeholder='text2' required>
        </div>
        <div>
            <input ng-model='text3' type="text" name='text3' placeholder='text3' required>
        </div>

        <div class="error-wrapper">
            <div ng-class="{ view: testForm.text1.$invalid }" class="error" ng-messages="testForm.text1.$error">
                <div ng-message='required'>Text1 required</div>
            </div>
            <div ng-class="{ view: testForm.text2.$invalid }" class="error" ng-messages="testForm.text2.$error">
                <div ng-message='required'>Text2 required</div>
            </div>
            <div ng-class="{ view: testForm.text3.$invalid }" class="error" ng-messages="testForm.text3.$error">
                <div ng-message='required'>Text3 required</div>
            </div>
        </div>
        <button>Submit</button>
    </form>

</body>

</html>

＆＃13;

它只显示了第.view项内容Dockerfile的第一条错误消息{/ 3}}

Answer 2

如果将输入包装在带有ID的表单标记中，则可以在表单上使用ng-messages从所有输入中获取错误。你可以在这里看到：http://jsbin.com/tikufuvawe/2/edit。

<form name="userDetails">
  <input name="userName" type="number" ng-model="number" required ng-maxlength="2" />
  <textarea name="text" type="text" ng-model="text" required></textarea>
  <div ng-messages="userDetails.$error">
    <div ng-message="required">This is required</div>
  </div>
</form>

编辑：

我已使用ng-show更新了我的示例http://jsbin.com/zadojamifo/3/edit以隐藏其他错误，以便一次只显示一个错误。它不是一个很好的解决方案，但适用于所描述的情况。

<div ng-messages="userDetails.number.$error">
    <div ng-message="required">number is required</div>
  </div>
  <div ng-messages="userDetails.text.$error" ng-show="!userDetails.number.$error.required">
    <div ng-message="required">text is required</div>
  </div>
  <div ng-messages="userDetails.other.$error" ng-show="!userDetails.number.$error.required && !userDetails.text.$error.required">
    <div ng-message="required">other is required</div>
  </div>

正如您所看到的，如果添加更多验证类型并且添加了需要验证的更多控件，ng-show的大小会越来越大。

Answer 3

也许为时已晚，但这是我的解决方案，使用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>

Answer 4

你可以做这样的事情

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

在这种情况下，只有当第一个消息不存在时才显示第二个消息块（如果存在数字，则隐藏消息。$ error）

Answer 5

此示例（http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html）使用以下解决方案：

<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;
};

Answer 6

如果您不想在页面加载时显示，或者在页面提交或更改值时显示，请使用

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

如果您触摸文本框，则会显示“脏”
如果尝试提交“已提交”页面
它适用于名称而不是模型

ngMessages：如何隐藏或显示另一个消息

6 个答案: