Из этого туториала вы узнаете, как собирать и проверять данные HTML-форм с помощью двусторонней привязки данных AnguarlJS. В этом уроке мы узнаем, как реализовать простую форму регистрации пользователей с помощью Angular. Попутно мы рассмотрим базовый HTML и покажем, что нужно изменить, чтобы включить AngularJS.
Prerequisities
- Установите 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'; /* Controllers */ angular.module('myApp.controllers', []). .controller('MyCtrl1', ['$scope', function($scope) { $scope.formInfo = {}; $scope.saveData = function() { }; }]) .controller('MyCtrl2', [function() { }]);
Мы также определили функцию с именем saveData() которая будет вызываться, когда пользователь нажимает кнопку «Зарегистрироваться».
Далее нам нужно прикрепить директиву ng-controller к самой форме.
<form class="form-horizontal" role="form" ng-controller="MyCtrl1">
Затем прикрепите директиву ng-click к ng-click «Зарегистрироваться»:
<button type="submit" ng-click="saveData()" class="btn btn-success">Sign up</button>
Внутри функции saveData() добавьте console.log($scope.formInfo); просто чтобы проверить, получаем ли мы сбор данных формы в нашем контроллере с использованием $scope . Перезапустите сервер узла, перейдите на страницу HTML и проверьте консоль браузера. Вы должны увидеть что-то вроде этого:
Object {Name: "Jay", Email: "[email protected]", Password: "helloworld"}
Теперь эти собранные данные можно хранить в базе данных.
Проверка входных данных
Нам также необходимо проверить, действительны ли данные, полученные нами из $scope . Если это не так, мы должны показать некоторые ошибки проверки. Директива ng-show показывает или скрывает элемент на основе значения выражения. Мы будем использовать его для отображения сообщений об ошибках. Начните с определения трех переменных $scope — $scope.nameRequired , $scope.emailRequired и $scope.passwordRequired . Мы saveData() имя, адрес электронной почты и пароль в функции saveData() как показано в обновленном saveData() app/js/controllers.js .
'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>
Перезапустите сервер узла и попробуйте нажать кнопку «Зарегистрироваться» с пустыми элементами ввода. Вы должны увидеть соответствующие сообщения об ошибках.
Вывод
В этом уроке мы узнали, как читать данные из формы и проверять их с помощью AngularJS. Я бы порекомендовал прочитать документацию по AngularJS API для более глубокого понимания. Тем временем, рабочая демонстрация доступна здесь .