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>
Изучаем AngularJS на пяти практических примерах

На странице форма должна выглядеть следующим образом:

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>
Создание движка для форума с помощью Meteor и AngularJS

Как вы можете видеть, директива 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.

В то же время рабочую демо-версию вы можете найти здесь.