Подтвердить поле формы только для отправки или ввода пользователем

У меня есть поля формы, которые проверяются с использованием required . Проблема в том, что ошибка отображается сразу после визуализации формы. Я хочу, чтобы он отображался только после ввода пользователем текстового поля или отправки.

Как я могу это реализовать?

Используйте флаг $dirty для отображения ошибки только после того, как пользователь взаимодействует со входом:

 
Email is required

Если вы хотите инициировать ошибки только после того, как пользователь отправил форму, вы можете использовать отдельную переменную флага, как в:

 
Email is required
 function MyCtrl($scope){ $scope.submit = function(){ // Set the 'submitted' flag to true $scope.submitted = true; // Send the form to server // $http.post ... } }; 

Тогда, если все, что JS внутри выражения ng-show выглядит слишком много для вас, вы можете абстрагировать его на отдельный метод:

 function MyCtrl($scope){ $scope.submit = function(){ // Set the 'submitted' flag to true $scope.submitted = true; // Send the form to server // $http.post ... } $scope.hasError = function(field, validation){ if(validation){ return ($scope.form[field].$dirty && $scope.form[field].$error[validation]) || ($scope.submitted && $scope.form[field].$error[validation]); } return ($scope.form[field].$dirty && $scope.form[field].$invalid) || ($scope.submitted && $scope.form[field].$invalid); }; }; 
 
required

Если вы хотите показывать сообщения об ошибках при отправке формы, вы можете использовать form.$submitted условия form.$submitted чтобы проверить, была ли сделана попытка отправить форму. Проверьте следующий пример.

 
Please enter user name.
Please enter user address.
Should be less than 30 chars

Вы можете использовать форму состояния form.$submitted angularjs form.$submitted . Первоначально form.$submitted значение будет false и станет true после успешной подачи формы.

Эрик Айгнер,

Используйте $ грязный (поле было изменено) и $ недействительным (содержимое поля недействительно).

Пожалуйста, проверьте ниже примеры для проверки угловой формы

1)

Пример проверки HTML для ввода пользователем ввода:

 

Email:
Email is required. Invalid email address.

2)

Пример проверки HTML / Js для пользователя:

  

Email:
Email is required. Invalid email address.

Пользовательская директива:

 app.directive('formSubmitValidation', function () { return { require: 'form', compile: function (tElem, tAttr) { tElem.data('augmented', true); return function (scope, elem, attr, form) { elem.on('submit', function ($event) { scope.$broadcast('form:submit', form); if (!form.$valid) { $event.preventDefault(); } scope.$apply(function () { scope.submitted = true; }); }); } } }; }) 

3)

вы не хотите использовать директиву для использования функции ng-change, как показано ниже

  

Email:
Email is required. Invalid email address.

Контроллер SubmitFun () JS:

  var app = angular.module('example', []); app.controller('exampleCntl', function($scope) { $scope.submitFun = function($event) { $scope.submitted = true; if (!$scope.myForm.$valid) { $event.preventDefault(); } } 

});

Вызов проверки на элемент формы может быть обработан путем запуска события изменения для этого элемента:

a) пример: смена триггера на отдельный элемент в форме

 $scope.formName.elementName.$$element.change(); 

b) пример: событие смены триггера для каждого из элементов формы, например, на ng-submit, ng-click, ng-blur …

 vm.triggerChangeForFormElements = function() { // trigger change event for each of form elements angular.forEach($scope.formName, function (element, name) { if (!name.startsWith('$')) { element.$$element.change(); } }); }; 

в) и еще один способ для этого

  var handdleChange = function(form){ var formFields = angular.element(form)[0].$$controls; angular.forEach(formFields, function(field){ field.$$element.change(); }); }; 
  • Атрибут входного автофокуса
  • Как добавить некоторые небольшие служебные функции в приложение AngularJS?
  • Выпадающая директива AngularJS скрыть при нажатии
  • Ошибка: Достигнуто 10 $ digest () итераций. Aborting! с динамическим сортировочным предикатом
  • В чем разница между «@» и «=» в области действия в AngularJS?
  • Структура папки AngularJS
  • В чем смысл запроса: «ngModel»?
  • Обновление страницы дает «Страница не найдена»
  • Angularjs - Скрыть содержимое до загрузки DOM
  • Обеспечение уникальных имен пользователей Firebase simplelogin
  • Использование одного и того же controllerа на разных элементах для обращения к одному и тому же объекту
  • Давайте будем гением компьютера.