Menu
I'm trying to use the Angular Materials snippet for a form input field with ng-messages for displaying error messages.
When I clear and fill this field multiple times, it somehow stores the 'old' error messages, showing x times 'Address is mandatory'.
If I remove the element outside the md-input-container, it works fine (but I want the ng-messages inside the md-input-container obv).
<div layout-gt-sm="row" ng-show="showAddress">
<md-input-container class="md-block" flex-gt-sm="">
<md-icon md-font-library="material-icons">home</md-icon>
<label>Adres</label>
<input ng-model="address" name="address" required />
<div ng-messages="orderForm.address.$error" role="alert">
<div ng-message="required">Address is mandatory</div>
</div>
</md-input-container>
</div>
Update: Ok I was using an older version of Angular and Angular-Animate (1.3.15). Updating this resulted in the fix.
665
First check if you have ngMessages injected in your module again, second you can check if you have a form with the name 'orderForm' and last you must check if your ng-model has a controller or something where you have the data.
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<style type="text/css">
</style>
</head>
<body ng-app="testApp" ng-controller="AppCtrl">
<form name="orderForm">
<div layout-gt-sm="row" >
<md-input-container class="md-block" flex-gt-sm="">
<label>Address</label>
<input ng-model="address" name="address" required />
<div ng-messages="orderForm.address.$error" role="alert">
<div ng-message="required">Address is mandatory</div>
</div>
</md-input-container>
</div>
</form>
<script type="text/javascript">
var app = angular.module("testApp", ["ngMaterial","ngMessages"])
.controller('AppCtrl', function($scope) {
$scope.address = 'Prueba';
});
</script>
</body>
</html>Had the same issue, installing ngMessages into your app resolved this issue for me.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
