Валидация формы

Последнее обновление: 26.04.2017

При создании нового объекта нередко могут возникать ошибки. Но механизм валидации AngularJS позволяет нам информировать пользователя об ошибках. Возьмем, к примеру, html-страницу из прошлого раздела и добавим к ней форму:

<!doctype html>
<html ng-app="questApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyles.css" />
</head>
<body>
<div  ng-controller="QuestionController">
<div class="quest">
<h3>{{question.text}}</h3>
<p>{{question.author}} </p> <p><i>{{question.date}}</i></p>
</div>
<h3>Ответы</h3>
<div class="answers">
<div ng-repeat="answer in question.answers" class="answer">
<div class="vote">
    <a class="vote-up" ng-click="voteUp(answer)"></a>
    <span class="rate">{{answer.rate}}</span>
    <a class="vote-down" ng-click="voteDown(answer)"></a>
</div>
<b>{{answer.text | formatText}}</b>
<p>{{answer.author}}</p>
<p><i>{{answer.date}}</i></p>
</div>
</div>
</div>
<div ng-controller="AnswerController">
<form name="answerForm">
<fieldset>
<p><label for="answerText">Текст ответа</label>
<input id="answerText" ng-model="answer.text" required placeholder="Введите ответ" /></p>
<p><label for="answerAuthor">Автор ответа</label>
<input id="answerAuthor" ng-model="answer.author" required placeholder="Введите автора" /></p>
<p><label for="answerDate">Дата ответа</label>
<input id="answerDate" ng-model="answer.date" required  ng-pattern="/\d\d/\d\d/\d\d\d\d/" placeholder="Введите дату" /></p>
</fieldset>
<button type="submit" ng-click="save(answer, answerForm)">Сохранить</button>
</form>
</div>
<script src="js/lib/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/QuestionController.js"></script>
<script src="js/controllers/AnswerController.js"></script>
<script src="js/filter.js"></script>
</body>
</html>

За работу с этой формой будет отвечать контроллер AnswerController, который мы сейчас создадим и который мы подключаем внизу страницы. Чтобы связать создаваемый объект с полями, используется директива ng-model. Поле с атрибутом ng-model="answer.text", таким образом, будет отвечать за свойство text создаваемого формой объекта answer.

Так как нам надо, чтобы все поля перед отправкой были заполнены, устанавливаем для каждого поля атрибут required, который, в случае незаполнения поля, укажет пользователю, что данное поле надо обязательно заполнить.

Для поля для ввода даты также устанавливаем атрибут ng-pattern="/\d\d/\d\d/\d\d\d\d/", который указывает на формат вводимой даты. Директива ng-pattern принимает регулярное выражение, которому должен соответствовать вводимое значение. То есть в данном случае регулярное выражение соответствует, например, выражению 12/11/2013.

И, наконец, для кнопки отправки установлено событие нажатия: ng-click="save(answer, answerForm)", которое вызывает функцию save контроллера AnswerController, передавая в нее в качестве параметров объект answer, создаваемый, полями формы, и объект формы answerForm (так как у элемента form атрибут name="answerForm").

Теперь создадим простенький контроллер AnswerController:

questApp.controller('AnswerController', 
	function AnswerController($scope){
		$scope.save = function (answer, answerForm){
			if(answerForm.$valid){
				// действия по сохранению
				alert(answer.author + ", ваш ответ сохранен");
			}
		};
})

С помощью выражения answerForm.$valid просматриваем, прошла форма валидацию или нет.

Запустим и попробуем ввести различные значения:

Валидация формы в AngularJS

Как видно на рисунке, поле для ввода автора не заполнено, поэтому срабатывает атрибут required, который помечает поле - в данном случае это сообщение о необходимости заполнить поле. В других браузерах действие может быть иным, например, в Firefox просто выделяет границу поля красным цветом.

Если все поля заполнены правильно, то контроллер отобразит нам сообщение. Если же, например, значение поля даты не будет соответствовать установленному для него регулярному выражению, то форма не пройдет валидацию и сообщение, естественно, не отобразится.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850