Validar campo de formulário apenas no envio ou input do usuário

Eu tenho campos de formulário que são validados usando required . O problema é que o erro é exibido imediatamente quando o formulário é processado. Eu só quero que seja exibido depois que o usuário realmente digitou no campo de texto, ou em enviar.

Como posso implementar isso?

Use o sinalizador $dirty para mostrar o erro somente depois que o usuário interagiu com a input:

 
Email is required

Se você deseja acionar os erros somente depois que o usuário enviou o formulário, você pode usar uma variável de sinalizador separada como em:

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

Então, se todo esse JS dentro ng-show expressão ng-show parecer muito para você, você poderá abstraí-lo em um 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

Se você deseja mostrar mensagens de erro no envio do formulário, você pode usar o form.$submitted condição form.$submitted para verificar se foi feita uma tentativa de enviar o formulário. Verifique o exemplo a seguir.

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

Você pode usar o formulário de estado do formulário angularjs form.$submitted Submited. Inicialmente, o form.$submitted será false e se tornará true após o envio bem-sucedido do formulário.

Erik Aigner,

Por favor use $ dirty (O campo foi modificado) e $ invalid (O conteúdo do campo não é válido).

Por favor, verifique abaixo exemplos para validação de formulário angular

1)

Exemplo de validação HTML para usuário insira inputs:

 

Email:
Email is required. Invalid email address.

2)

Exemplo de validação HTML / Js para usuários enviados:

  

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)

você não quer usar a diretiva usar a function ng-change como abaixo

  

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

});

A invocação da validação no elemento de formulário pode ser tratada pelo acionamento do evento de mudança neste elemento:

a) exemplo: triggersr mudança no elemento separado em forma

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

b) exemplo: evento de mudança de gatilho para cada um dos elementos do formulário, por exemplo, em 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) e mais uma maneira para isso

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