В этой статье мы покажем вам, как собрать и проверить данные HTML-форм с использованием двустороннего связывания данных AnguarlJS. Также мы расскажем, как реализовать простую пользовательскую регистрационную форму с помощью Angular.
Предварительные условия
HTML-код для нашей формы регистрации приведен ниже. Bootstrap был использован, чтобы сделать сайт визуально более привлекательным.
(0)
<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 перед закрывыющим тегом формы. Этот фрагмент использует переменную с именем 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. После внесения этих изменений, наше приложение выглядит следующим образом:
'use strict';
/* Controllers */
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-click к кнопке Sign up:
<button type="submit" ng-click="saveData()" class="btn btn-success">Sign up</button>
Внутри функции saveData(), добавим console.log($scope.formInfo); только для того, чтобы проверить, получаем ли мы данные из формы в нашем контроллере, используя $scope. Перезапустите node сервер, перейдите на страницу HTML, и проверьте вашу консоль браузера. Вы должны увидеть следующую строку:
Object {Name: "Jay", Email: "<span id="cloak052629266fcd01fada2dbba70cd77d82">Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</span><script type='text/javascript'>
document.getElementById('cloak052629266fcd01fada2dbba70cd77d82').innerHTML = '';
var prefix = 'ma' + 'il' + 'to';
var path = 'hr' + 'ef' + '=';
var addy052629266fcd01fada2dbba70cd77d82 = 'jdec' + '@';
addy052629266fcd01fada2dbba70cd77d82 = addy052629266fcd01fada2dbba70cd77d82 + 'gmail' + '.' + 'com';
var addy_text052629266fcd01fada2dbba70cd77d82 = 'jdec' + '@' + 'gmail' + '.' + 'com';document.getElementById('cloak052629266fcd01fada2dbba70cd77d82').innerHTML += '<a ' + path + '\'' + prefix + ':' + addy052629266fcd01fada2dbba70cd77d82 + '\'>'+addy_text052629266fcd01fada2dbba70cd77d82+'<\/a>';
</script>", Password: "helloworld"}
Теперь эти собранные данные могут быть сохранены в базе данных.
Мы также должны проверить валидны ли данные, которые мы получили из $scope. Если это не так, мы должны показать соответствующие ошибки валидации. Директива ng-show показывает или скрывает элемент на основе значения выражения. Мы будем использовать её, чтобы показать сообщения об ошибках. Начните с определения трех $scope переменных - $scope.nameRequired, $scope.emailRequired и $scope.passwordRequired. Мы будем проверять имя, электронную почту и пароль в функции saveData(), как показано в коде ниже:
'use strict';
/* Controllers */
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>
Перезагрузите node сервер и попробуйте нажать на кнопку Sign Up с пустыми полями. Вы должны увидеть соответствующие сообщения об ошибках.
В этой статье мы научились считывать данные с полей формы и проверять их с помощью AngularJS. Я бы рекомендовал читать AngularJS API docs для более глубокого понимания материала.
© 2008 - 2024 Все права защищены
Новый комментарий