Форма перевірки в AngularJS

9 червня 2022 р.187

Однією з переваг AngularJS є простота, яку він пропонує для перевірки форм. Приклад нижче демонструє простий шлях для впровадження перевірки на стороні клієнта використовуючи властивості форм AngularJS.

Припустимо, у нас є форма з двома полями — ім'ям користувача, адресою електронної пошти та двома кнопками — одна для скидання, а інша для надсилання форми. Ідея нашого прикладу полягає в тому, що обидва поля форми обов'язкові, тому форма не може бути надіслана, якщо будь-яке з полів порожнє або містить неправильний формат (наприклад, електронної пошти).

Сторінка представлення

Найкращий спосіб скористатися можливостями Angular для перевірки форми — це приєднання контролера до нашої форми.

index.html

<code data-language="html"><!DOCTYPE html>
<html>
<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> <script src="script.js"></script> <link rel="stylesheet" href="style.css" >
</head>
<body> <h2>Приклад перевірки форми в AngularJS</h2> <form ng-controller="validationCtrl" name="sampleForm" novalidate> <label>Ім'я користувача:</label> <input type="text" class="form-control" name="username" ng-model="username" required> <span ng-show="sampleForm.username.$error.required">Ім'я користувача обов'язково.</span> <label>Email:</label> <input type="email" class="form-control" name="email" ng-model="email" required> <span ng-show="sampleForm.email.$error.required">Email обов'язковий.</span> <span ng-show="sampleForm.email.$error.email">Неправильна адреса.</span> <button class="btn btn-link" ng-click="reset()">Скинути</button> <input type="submit" class="btn btn-primary" ng-disabled="sampleForm. $invalid" ng-click="checkData()">
</form>
</body>
</html>

Як зрозуміло з визначення<head>, ми вирішили розділити HTML на JavaScript і CSS.

Рядок 11 оголошує, що наша форма прикріплена до validationCtrl і так, ваше припущення вірно, script.js буде містити логіку контролера, який тільки обробляє кнопки нашої форми.

Типовий процес перевірки на стороні клієнта містить повідомлення про помилки, за винятком випадків невірних (адреса електронної пошти) або порожніх полів введення.

У Angular є дискретні стани форми такі як $dirty або $invalid, відповідно, для перевірки взаємодії користувача з формою та для перевірки невірних полів введення. Щоб дізнатися більше про властивості форм, зверніться до офіційної документації.

Як правило, це означає, що нам частково потрібні додаткові повідомлення, які відображатимуться в нашому додатку. AngularJS пропонує директиву ng-show для цієї мети, яка у поєднанні зі станами форми показує результати перевірки на стороні клієнта. Рядки 14 та 17-18 здійснюють перевірку в стилі AngularJS.

Ми хочемо, щоб наша кнопка для відправки форми була заблокована, поки форма неправильна (рядок 20). AngularJS пропонує директиву ng-disabled, щоб зробити це можливим.

Нарешті, ми пояснюємо нашому контролеру, що хочемо запустити спеціальну функцію для кожної кнопки форми за допомогою директиви ng-click.

Робота контролера

Коли наша форма містить коректний стан, кнопка надсилання стає доступною. Припустимо, що існують встановлені коректні ім'я користувача та адреса електронної пошти з веб-застосунку і що це мета кнопки скидання: повернути нашу форму до прийнятного формату. З іншого боку, кнопка відправки повинна перевіряти, що форма містить коректні дані.

Відповідно в AngularJS клеєм між контролером додатків та поданням виступає об'єкт $scope.

script.js

<code data-language="html">function validationCtrl($scope) { var validUsername="Тодоріс Баїс"; var validEmail="thodoris.bais@gmail.com"; $scope.reset=function(){ $scope.username=validUsername; $scope.email=validEmail; } 
$scope.checkData=function() { if ($scope.username !=validUsername || $scope.email !=validEmail) { alert("Надані дані не співпадають із власником за умовчанням"); } 
else { alert("Начебто нормально!"); } 
} 
}