Я дуже новачок у angularjs. Скажімо, мій додаток має форму. Використовуючи інспектор, я помітив, що якщо angularjs вважає, що форма недійсна, вона додає до форми клас ng-invalid. Прекрасний.
Тож здається, що для того, щоб перевірити, чи правильна форма, мені потрібно забруднити свій код за допомогою селектора Jquery ?! Який спосіб angularjs вказує на дійсність форми без використання контролера форми?
Відповіді:
Коли ви поміщаєте <form>тег всередину ngApp, AngularJS автоматично додає контролер форми (насправді існує директива, яка називається, formщо додає необхідну поведінку). Значення атрибута name буде прив'язане до вашої області дії; так щось на зразок <form name="yourformname">...</form>задовольнить:
Форма є екземпляром FormController. Екземпляр форми за бажанням може бути опублікований у області застосування за допомогою атрибута name.
Отже, щоб перевірити правильність форми, ви можете перевірити значення $scope.yourformname.$validвластивості сфери дії.
Більше інформації ви можете отримати у розділі "Посібник розробника" про форми.
$scope.yourformname.$valid.
$scope.myformname = {};
ng-showзамість ng-if, отримує undefinedпомилку.
Приклад
<div ng-controller="ExampleController">
<form name="myform">
Name: <input type="text" ng-model="user.name" /><br>
Email: <input type="email" ng-model="user.email" /><br>
</form>
</div>
<script>
angular.module('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
//if form is not valid then return the form.
if(!$scope.myform.$valid) {
return;
}
}]);
</script>
Ви також можете використовувати myform.$invalid
Напр
if($scope.myform.$invalid){return;}
форму
Якщо вказано атрибут name, контролер форми публікується в поточній області дії під цим іменем.
Псевдонім: ngForm
У Angular форми можна вкладати. Це означає, що зовнішня форма дійсна, коли діють також усі дочірні форми. Однак браузери не дозволяють вкладати елементи, тому Angular забезпечує директиву ngForm, яка поводиться ідентично, але може бути вкладена. Це дозволяє мати вкладені форми, що дуже корисно при використанні директив перевірки Angular у формах, які динамічно генеруються за допомогою директиви ngRepeat. Оскільки ви не можете динамічно генерувати атрибут name вхідних елементів за допомогою інтерполяції, вам доведеться обернути кожен набір повторюваних входів у директиву ngForm і вкласти їх у зовнішній елемент форми.
Класи CSS
ng-valid встановлюється, якщо форма є дійсною.
ng-invalid встановлюється, якщо форма недійсна.
ng-pristine встановлюється, якщо форма є первозданною.
ng-dirty встановлюється, якщо форма брудна.
ng-submitted встановлюється, якщо була подана форма.
Майте на увазі, що ngAnimate може виявити кожен із цих класів при додаванні та видаленні.
Подання форми та запобігання дії за замовчуванням
Оскільки роль форм у програмах Angular на стороні клієнта відрізняється від тієї, що застосовується у класичних додатках для кругових поїздок, бажано, щоб браузер не перекладав подання форми у повне перезавантаження сторінки, яке надсилає дані на сервер. Натомість слід активувати якусь логіку javascript для обробки подання форми специфічним способом.
З цієї причини Angular забороняє дію за замовчуванням (подання форми на сервер), якщо в елементі не вказано атрибут action.
Ви можете використати один із наступних двох способів, щоб вказати, який метод javascript слід викликати при поданні форми:
Директива ngSubmit для елемента форми
Директива ngClick на першу кнопку або поле введення типу submit (input [type = submit])
Щоб запобігти подвійному виконанню обробника, використовуйте лише одну з директив ngSubmit або ngClick.
Це пов’язано з наступними правилами подання форми у специфікації HTML:
Якщо форма має лише одне поле введення, то натискання клавіші Enter у цьому полі активує подання форми (ngSubmit), якщо форма має більше 2 полів введення і не має кнопок, або input[type=submit]натискання клавіші Enter не запускає подання, якщо форма має одне або кілька полів введення і одна або декілька кнопок або input[type=submit]натискання клавіші Enter у будь-якому з полів введення викликає обробник клацання на першій кнопці або input[type=submit](ngClick) та обробник подання у формі, що вкладає (ngSubmit).
Будь-які зміни ngModelOptions, що очікують на розгляд, відбудуться негайно після подання додаткової форми. Зверніть увагу, що події ngClick відбудуться до оновлення моделі.
Використовуйте ngSubmit, щоб отримати доступ до оновленої моделі.
app.js :
angular.module('formExample', [])
.controller('FormController', ['$scope', function($scope) {
$scope.userType = 'guest';
}]);
Форма :
<form name="myForm" ng-controller="FormController" class="my-form">
userType: <input name="input" ng-model="userType" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span>
userType = {{userType}}
myForm.input.$valid = {{myForm.input.$valid}}
myForm.input.$error = {{myForm.input.$error}}
myForm.$valid = {{myForm.$valid}}
myForm.$error.required = {{!!myForm.$error.required}}
</form>
Джерело: AngularJS: API: form