Инструменты пользователя
angular:angularjs:form:validation
Различия
Здесь показаны различия между двумя версиями данной страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
angular:angularjs:form:validation [2020/06/09 01:46] werwolf |
angular:angularjs:form:validation [2023/01/12 12:18] (текущий) |
||
|---|---|---|---|
| Строка 113: | Строка 113: | ||
| } | } | ||
| </style> | </style> | ||
| + | </code> | ||
| + | |||
| + | ====Отображение сообщений о невалидности==== | ||
| + | |||
| + | отображение сообщений о невалидности пользовательского ввода это хороший тон но существует два подхода для отображения сообщений: 1й когда ввод валидируется после каждого действия пользователя и 2й данные валидируются после нажатия на кнопку **submit**\\ | ||
| + | <code html> | ||
| + | <!DOCTYPE html> | ||
| + | <html ng-app="studyModule"> | ||
| + | <head> | ||
| + | <!--отображение сообщений о невалидности пользовательского ввода это хороший тон но существует два подхода для | ||
| + | отображения сообщений: 1й когда ввод валидируется после каждого действия пользователя и 2й данные валидируются после нажатия на кнопку submit--> | ||
| + | <title>Forms</title> | ||
| + | <script src="../angular.min%20.js"></script> | ||
| + | <link href="../bootstrap-theme.css" rel="stylesheet" /> | ||
| + | <link href="../bootstrap.css" rel="stylesheet" /> | ||
| + | <script> | ||
| + | angular.module("studyModule", []) | ||
| + | .controller("studyCtrl", function ($scope) { | ||
| + | $scope.addNewUser = function (userDetails) { | ||
| + | if (myForm.$valid) { | ||
| + | $scope.message = userDetails.name | ||
| + | + " (" + userDetails.email + ") (" + userDetails.agreed + ")"; | ||
| + | } else { | ||
| + | $scope.showValidation = true; | ||
| + | } | ||
| + | }; | ||
| + | $scope.message = "Ready"; | ||
| + | $scope.getError = function (error) { | ||
| + | if (angular.isDefined(error)) { | ||
| + | if (error.required) { | ||
| + | return "Please enter a value"; | ||
| + | } else if (error.email) { | ||
| + | return "Please enter a valid email address"; | ||
| + | } | ||
| + | } | ||
| + | }; | ||
| + | }); | ||
| + | </script> | ||
| + | <style> | ||
| + | form.validate .ng-invalid-required.ng-dirty { | ||
| + | background-color: lightpink; | ||
| + | } | ||
| + | |||
| + | form.validate .ng-invalid-email.ng-dirty { | ||
| + | background-color: lightgoldenrodyellow; | ||
| + | } | ||
| + | |||
| + | div.error { | ||
| + | color: red; | ||
| + | font-weight: bold; | ||
| + | } | ||
| + | </style> | ||
| + | </head> | ||
| + | <body> | ||
| + | <div id="todoPanel" class="panel col-xs-3" ng-controller="studyCtrl"> | ||
| + | <form name="myForm" novalidate ng-submit="addNewUser(newUser)" ng-class="showValidation ? 'validate' : ''"> | ||
| + | <div class="well"> | ||
| + | <div class="form-group"> | ||
| + | <label>Name:</label> | ||
| + | <input name="userName" type="text" class="form-control" required ng-model="newUser.name"> | ||
| + | </div> | ||
| + | <div class="form-group"> | ||
| + | <label>Email:</label> | ||
| + | <input name="userEmail" type="email" class="form-control" required ng-model="newUser.email"> | ||
| + | <div class="error" ng-show="showValidation"> | ||
| + | {{getError(myForm.userEmail.$error)}} | ||
| + | </div> | ||
| + | </div> | ||
| + | <button type="submit" class="btn btn-primary btn-block"> | ||
| + | OK | ||
| + | </button> | ||
| + | </div> | ||
| + | </form> | ||
| + | </div> | ||
| + | </body> | ||
| + | </html> | ||
| </code> | </code> | ||
| Строка 212: | Строка 288: | ||
| Объект модели имеет два свойства: **user** и **email**.\\ | Объект модели имеет два свойства: **user** и **email**.\\ | ||
| Из-за **ng-show** диапазоны с color: red отображаются только тогда, когда пользователь или электронная почта имеют значение **$dirty** и **$invalid**. | Из-за **ng-show** диапазоны с color: red отображаются только тогда, когда пользователь или электронная почта имеют значение **$dirty** и **$invalid**. | ||
| + | |||
| + | |||
angular/angularjs/form/validation.1591656365.txt.gz · Последние изменения: 2023/01/12 12:15 (внешнее изменение)
Инструменты страницы
Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: CC Attribution-Share Alike 4.0 International
