У меня есть форма Angular. Поля проверяются с помощью атрибута ng-pattern. У меня также есть кнопка reset. Я использую Ui.Utils Event Binder для обработки события reset следующим образом:
<form name="searchForm" id="searchForm" ui-event="{reset: 'reset(searchForm)'}" ng-submit="search()">
<div>
<label>
Area Code
<input type="tel" name="areaCode" ng-model="areaCode" ng-pattern="/^([0-9]{3})?$/">
</label>
<div ng-messages="searchForm.areaCode.$error">
<div class="error" ng-message="pattern">The area code must be three digits</div>
</div>
</div>
<div>
<label>
Phone Number
<input type="tel" name="phoneNumber" ng-model="phoneNumber" ng-pattern="/^([0-9]{7})?$/">
</label>
<div ng-messages="searchForm.phoneNumber.$error">
<div class="error" ng-message="pattern">The phone number must be seven digits</div>
</div>
</div>
<br>
<div>
<button type="reset">Reset</button>
<button type="submit" ng-disabled="searchForm.$invalid">Search</button>
</div>
</form>
Как вы можете видеть, когда форма reset вызывает метод reset на $scope. Вот как выглядит весь контроллер:
angular.module('app').controller('mainController', function($scope) {
$scope.resetCount = 0;
$scope.reset = function(form) {
form.$setPristine();
form.$setUntouched();
$scope.resetCount++;
};
$scope.search = function() {
alert('Searching');
};
});
Я звоню form.$setPristine() и form.$setUntouched, следуя советам еще одного вопроса в разделе "Переполнение стека". Единственная причина, по которой я добавил счетчик, заключалась в том, чтобы доказать, что код вызывается (что это такое).
Проблема заключается в том, что даже после перепродажи формы сообщения проверки не исчезают. Вы можете увидеть полный код на Plunker. Вот скриншот, показывающий, что ошибки не исчезают:
