Próbuję użyć fragmentu materiałów kątowych dla pola wprowadzania formularza z wiadomościami ng do wyświetlania komunikatów o błędach.
Gdy wyczyszczę i wypełnię to pole wiele razy, w jakiś sposób przechowuje „stare” komunikaty o błędach, pokazując x razy „Adres jest obowiązkowy”.
Jeśli usuwam element poza md-input-container, działa on dobrze (ale chcę, aby ng-messages wewnątrz 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>
Aktualizacja: Ok korzystałem ze starszej wersji Angular i Angular-Animate (1.3.15). Aktualizacja tego spowodowała poprawkę.
Odpowiedzi:
12 dla odpowiedzi № 1Najpierw sprawdź, czy wprowadzono ngMessagesTwój moduł ponownie, po drugie możesz sprawdzić, czy masz formularz o nazwie „orderForm” i musisz sprawdzić, czy twój model ng ma kontroler lub coś, w którym masz dane.
<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>7 dla odpowiedzi nr 2
Mając ten sam problem, zainstalowanie ngMessages w aplikacji rozwiązało ten problem.