Validar el campo de formulario solo en el envío o la entrada del usuario

Tengo campos de formulario que se validan usando required . El problema es que el error se muestra inmediatamente cuando se procesa el formulario. Solo quiero que se muestre después de que el usuario ingresó realmente el campo de texto o cuando lo envíe.

¿Cómo puedo implementar esto?

Use $dirty flag para mostrar el error solo después de que el usuario haya interactuado con la entrada:

 
Email is required

Si desea desencadenar los errores solo después de que el usuario haya enviado el formulario, puede usar una variable de indicador separada como en:

 
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 ... } }; 

Entonces, si todo lo que JS dentro ng-show expresión ng-show parece demasiado para ti, puedes abstraerlo en un método separado:

 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

Si desea mostrar mensajes de error al enviar el formulario, puede usar el form.$submitted condición form.$submitted para verificar si se realizó un bash para enviar el formulario. Ver el siguiente ejemplo.

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

Puede usar angularjs formulario estado form.$submitted . Inicialmente, el valor de form.$submitted será false y se cumplirá después de enviar el formulario correctamente.

Erik Aigner,

Utilice $ dirty (El campo ha sido modificado) y $ invalid (El contenido del campo no es válido).

Por favor, consulte los ejemplos a continuación para la validación de forma angular

1)

Ejemplo de validación HTML para entradas de entrada de usuario:

 

Email:
Email is required. Invalid email address.

2)

Ejemplo de validación HTML / Js para envíos de usuarios:

  

Email:
Email is required. Invalid email address.

Directiva personalizada:

 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)

no desea usar la directiva utilizar la función ng-change como a continuación

  

Email:
Email is required. Invalid email address.

Controlador 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(); } } 

});

La invocación de la validación en el elemento del formulario se puede manejar activando el evento de cambio en este elemento:

a) ejemplo: activar el cambio en un elemento separado en forma

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

b) ejemplo: desencadenar un evento de cambio para cada uno de los elementos del formulario, por ejemplo, en 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(); } }); }; 

c) y una forma más de hacerlo

  var handdleChange = function(form){ var formFields = angular.element(form)[0].$$controls; angular.forEach(formFields, function(field){ field.$$element.change(); }); };