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

validar formulario en angular

Question

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?

Answer 1

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:

<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
</form>

2)

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

 <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate form-submit-validation="">
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span ng-show="submitted || myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit">
</p>
</form>

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

 <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate ng-change="submitFun()">
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span ng-show="submitted || myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit">
</p>
</form>

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

});

Answer 2

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

Answer 3

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.

Answer 4

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 intento para enviar el formulario. Ver el siguiente ejemplo.

<form name="myForm" novalidate ng-submit="myForm.$valid && createUser()">
<input type="text" name="name" ng-model="user.name" placeholder="Enter name of user" required>
<div ng-messages="myForm.name.$error" ng-if="myForm.$submitted">
<div ng-message="required">Please enter user name.</div>
</div>
<input type="text" name="address" ng-model="user.address" placeholder="Enter Address" required ng-maxlength="30">
<div ng-messages="myForm.name.$error" ng-if="myForm.$submitted">
<div ng-message="required">Please enter user address.</div>
<div ng-message="maxlength">Should be less than 30 chars</div>
</div>
<button type="submit">
Create user
</button>
</form>

Answer 5

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

<div>
<input type="email" name="email" ng-model="user.email" required />
<span ng-show="form.email.$dirty && form.email.$error.required">Email is required</span>
</div>

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:

<form ng-submit="submit()" name="form" ng-controller="MyCtrl">
<div>
<input type="email" name="email" ng-model="user.email" required />
<span ng-show="(form.email.$dirty || submitted) && form.email.$error.required">
Email is required
</span>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>

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

<form ng-submit="submit()" name="form">
<div>
<input type="email" name="email" ng-model="user.email" required />
<span ng-show="hasError(''email'', ''required'')">required</span>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>