В этой статье мы покажем вам, как собрать и проверить данные HTML-форм с использованием двустороннего связывания данных AnguarlJS. Также мы расскажем, как реализовать простую пользовательскую регистрационную форму с помощью Angular.
Предварительные условия
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 перед закрывыющим тегом формы. Этот фрагмент использует переменную с именем 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 Webmasters.BY Все права защищены
Новый комментарий