HTML-формы в AngularJS
В этой статье я покажу вам, как собирать и проверять данные HTML-форм с использованием двусторонних связей данных AngularJS. Мы узнаем, как реализовать простую пользовательскую форму регистрации с помощью Angular.
Попутно мы рассмотрим базовый HTML-код, чтобы выяснить, что нужно изменить для включения AngularJS.
Что нам потребуется для начала:
Установить Node.js;
Клонировать исходный проект AngularJS.
HTML-форма
HTML-код для нашей формы регистрации приведен ниже. Мы использовали Bootstrap, чтобы сделать сайт визуально более привлекательным:
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputName3" class="col-sm-2 control-label">Name</label>
<div class="col-sm-4">
<input class="form-control" id="inputName3" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-4">
<input class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-4">
<input class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">Sign up</button>
</div>
</div>
</form>
<script src="lib/common/jquery.min.js"></script>
<script src="lib/common/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
На странице форма должна выглядеть следующим образом:

Сбор данных
В JQuery отдельные формы ввода считываются с помощью такого кода:
$('#txtInput').val()
Так как AngularJS поддерживает двустороннюю привязку данных, мы не обязаны явно считывать ввод данных. Вместо этого, когда форма ввода изменяется, это автоматически отображается в переменной контроллера $scope.
Чтобы проверить это, добавьте следующий блок span в HTML-код до закрытия тега form. Этот сниппер взаимосвязан с переменной formInfo:
<span>{{formInfo}}</span>
AngularJS содержит директиву ng-model, которая помогает связать вводимые данные с переменной. Давайте применим директиву ng-model к трем элементам для ввода данных формы.
Вот, как будет выглядеть обновленная HTML-форма:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputName3" class="col-sm-2 control-label">Name</label>
<div class="col-sm-4">
<input class="form-control" id="inputName3" placeholder="Name" ng-model="formInfo.Name">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-4">
<input class="form-control" id="inputEmail3" placeholder="Email" ng-model="formInfo.Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" ng-model="formInfo.Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">Sign up</button>
</div>
</div>
<span>{{formInfo}}</span>
</form>
Как вы можете видеть, директива ng-model была присоединена к каждому из входных элементов. Каждый вход привязан к конкретному полю объекта formInfo.
Теперь, когда пользователь вводит данные в поля формы, formInfo обновляется автоматически. В этой демо-версии вы можете увидеть этот код в действии.
Используя ту же переменную formInfo мы можем получить доступ к данным формы, не считывая из нашего контроллера каждое значение элемента по отдельности.
Для этого нам необходимо определить переменную $scope.formInfo внутри нашего контроллера, MyCtrl1. После внесения этих изменений, вот как выглядит файл app/js/controllers.js:
'use strict';
/* Контроллеры */
angular.module('myApp.controllers', []).
.controller('MyCtrl1', ['$scope', function($scope) {
$scope.formInfo = {};
$scope.saveData = function() {
};
}])
.controller('MyCtrl2', [function() {
}]);
Мы также определили функцию saveData(), которая будет вызываться, когда пользователь нажимает кнопку Sign Up. Далее, нам необходимо присоединить директиву ng-controller к самой форме:
<form class="form-horizontal" role="form" ng-controller="MyCtrl1">
Затем присоединяем директиву ng-controller к кнопке Sign Up:
<button type="submit" ng-click="saveData()" class="btn btn-success">Sign up</button>
Внутри функции saveData() добавляем console.log($scope.formInfo); просто, чтобы проверить, собрали ли мы в контроллере данные формы, используя $scope.
Перезапустите сервер узла, откройте HTML-страницу и установите в браузере режим консоли.
Вы должны увидеть что-то вроде этого:
Object {Name: "Jay", Email: "jay3dec@gmail.com", Password: "helloworld"}
Теперь эти собранные данные могут быть сохранены в БД.
Проверка валидности входящих данных
Мы также должны проверить, валидны ли данные, которые мы получили от $scope. Если это не так, мы должны вывести ошибку проверки валидности.
Директива ng-show выводит или скрывает элемент на основе значения выражения. Мы используем ее, чтобы выводить сообщения об ошибках. Начните с определения трех переменных $scope - $scope.nameRequired, $scope.emailRequired, и $scope.passwordRequired.
Мы будем проверять имя, электронную почту и пароль через функцию saveData(), как это показано в обновленном файле app/js/controllers.js:
'use strict';
/* Контроллеры */
angular.module('myApp.controllers', [])
.controller('MyCtrl1', ['$scope', function($scope) {
$scope.formInfo = {};
$scope.saveData = function() {
$scope.nameRequired = '';
$scope.emailRequired = '';
$scope.passwordRequired = '';
if (!$scope.formInfo.Name) {
$scope.nameRequired = 'Name Required';
}
if (!$scope.formInfo.Email) {
$scope.emailRequired = 'Email Required';
}
if (!$scope.formInfo.Password) {
$scope.passwordRequired = 'Password Required';
}
};
}])
.controller('MyCtrl2', [function() {
}]);
На странице HTML для отображения сообщения об ошибке добавьте блок span для каждого входящего элемента, как это показано ниже:
<span ng-show="nameRequired">{{nameRequired}}</span>
<span ng-show="emailRequired">{{emailRequired}}</span>
<span ng-show="passwordRequired">{{passwordRequired}}</span>
Перезапустите сервер узла и попробуйте нажать на кнопку Sign Up с незаполненными полями входящих данных. Вы должны увидеть соответствующие сообщения об ошибках.
Заключение
В этой статье мы научились считывать данные из формы и проверять их с помощью AngularJS. Если вы хотите узнать об этом больше, я бы рекомендовал вам ознакомиться с документацией AngularJS API.
В то же время рабочую демо-версию вы можете найти здесь.