NgMessages: how to hide or show one message after another
I have the following code:
<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>
I wanted to show one error message at a time. When the first error is resolved, the following error message appears. Does anyone know how I can do this? Thank.
If you are inserting inputs into a form tag with an id, you can use ng messages in the form to get errors from all inputs. You can see it here: 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>
EDIT:
I have updated my example http://jsbin.com/zadojamifo/3/edit with ng-show
to hide other errors that only one will show. This is not a great solution, but it works for the situation described.
<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>
As you can see, the size ng-show
will get bigger and bigger if more validation types are added and more controls are added that need validation.
source to share
A good solution is to use CSS and ng-class
var app = angular.module('app', ['ngMessages']);
.error-wrapper {
color: red;
}
.error-wrapper > .view {
display: block;
}
.error-wrapper > .view ~ .view{
display: none;
}
<!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>
Shows only the first error message with the class .view
, on plunker http://plnkr.co/edit/kBSpRJLs6QA2D0jctKXB?p=preview
source to share
It may be too late, but this is my solution, use ng-messages-multiple to show one or more messages, angular follow the order of the validation messages:
<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>
source to share
You can do something like this
<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>
In this case, you only show the second block of messages if the first does not exist (and it is hidden if a number exists. $ Errors)
source to share
This example ( http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html ) uses the following solution:
<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;
};
source to share
If you don't want to show on page load, but either on page submit or on value change, use
<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>
- If you touch the text field, it will be "dirty"
- if you try to send the "Sent" page
- He's working on a non-model name
source to share