HTML-формы в AngularJS

В этой статье мы покажем вам, как собрать и проверить данные HTML-форм с использованием двустороннего связывания данных AnguarlJS. Также мы расскажем, как реализовать простую пользовательскую регистрационную форму с помощью Angular.

Admin
27 марта 2014

Предварительные условия

Установите 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 перед закрывыющим тегом формы. Этот фрагмент использует переменную с именем 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 = '&#109;a' + 'i&#108;' + '&#116;o';
var path = 'hr' + 'ef' + '=';
var addy052629266fcd01fada2dbba70cd77d82 = 'jd&#101;c' + '&#64;';
addy052629266fcd01fada2dbba70cd77d82 = addy052629266fcd01fada2dbba70cd77d82 + 'gm&#97;&#105;l' + '&#46;' + 'c&#111;m';
var addy_text052629266fcd01fada2dbba70cd77d82 = 'jd&#101;c' + '&#64;' + 'gm&#97;&#105;l' + '&#46;' + 'c&#111;m';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 для более глубокого понимания материала.

Источник

Комментарии 0

Новый комментарий

Для редактирования комментария осталось 10 минут

Комментарии отсутствуют