angularjs - reactivos - validar formulario angular 6

¿Cómo puedo simplificar la validación de formularios?

Question

El código a continuación parece funcionar bastante bien para hacer la validación de formularios básica requerida.

El formulario muestra un mensaje con un nombre en rojo cuando el campo está sucio + no válido y ¡Excelente! mensaje si el campo está sucio + válido.

Pero es un desastre tener que repetir este código para todos y cada uno de los campos del formulario:

<form name="myForm">
<div class="control-group"
ng-class="{error: myForm.name.$invalid && myForm.name.$dirty}">
<label>Name:</label>
<input type="text" name="name" ng-model="user.name" required/>
<span ng-show="myForm.name.$invalid && myForm.name.$dirty"
class="help-inline">Name is required</span>
<span ng-show="myForm.names.$valid && myForm.names.$dirty">Great!</span>
</div>
</form>

Me gustaría poder especificar los atributos ng-show y ng-class de una manera más fácil.

Answer 1

Considere usar este módulo ngValidate que he estado trabajando.

<input name="demo-field-1" ng-model="user.name" ng-validate="customStrategy">

La directiva agregará un lapso para mantener sus mensajes de error. Puede definir estrategias de validación personalizadas y mensajes de error individuales.

ngValidateFactory.strategies.customStrategy = [
{
value:ngValidate.required;
message:"This field is required"
},
{
value:[ngValidate.minLength,8];
message:"Minimum 8 characters are required"
},
{
value:[myFunction,arg1,arg2];
message:"This field fails my custom function test"
}]

plnkr de demostración

Answer 2

Echa un vistazo a mi formulario de validación angularJS en codpen link

He mostrado un ejemplo de cómo validar requerido, minlength, maxlength, correo electrónico, caso de contraseña, confirmar la coincidencia de contraseña en mi demostración.

Aquí está el código:

var myApp = angular.module(''myApp'',[]);
myApp.controller(''mainController'',[''$scope'', function($scope) {
}]);
myApp.directive(''validConfirmPassword'', function() {
return {
require:''ngModel'',
link: function(scope, elem, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue, $scope) {
var noMatch = viewValue != scope.myForm.password.$viewValue;
ctrl.$setValidity(''noMatch'', !noMatch)
})
}
}
}) 

.content{ margin-top:50px; }
.danger-text { color: red; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">AngularJS Form Validation</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="container content" ng-controller="mainController">
<div class="row">
<div class="col-sm-12">
<form name="myForm" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="first_name">First Name</label>
<input type="text" name="firstname" ng-model="firstname" id="firstname" class="form-control" required>
<p ng-show="myForm.firstname.$touched && myForm.firstname.$invalid" class="danger-text">Please enter your first name</p>
</div>
<div class="col-md-6 mb-3">
<label for="last_name">Last Name</label>
<input type="text" name="last_name" ng-model="last_name" id="last_name" class="form-control" required>
<p ng-show="myForm.last_name.$invalid && myForm.last_name.$touched" class="danger-text">Please enter your last name</p>
</div>
</div> <!-- End of row -->
<div class="row">
<div class="col-md-6 mb-3">
<label for="username">Username</label>
<input type="text" name="username" id="username" ng-model="username" class="form-control" ng-required="true" ng-minlength="4" ng-maxlength="10" >
<p ng-show="myForm.username.$error.required && myForm.username.$touched" class="danger-text">Please enter username</p>
<p ng-show="myForm.username.$error.minlength" class="danger-text">Username is too short</p>
<p ng-show="myForm.username.$error.maxlength" class="danger-text">Username is too long</p>
</div>
<div class="col-md-6 mb-3">
<label for="email">Email</label>
<input type="email" name="email" id="email" class="form-control" ng-model="email">
<p ng-show="myForm.email.$invalid && !myForm.email.$pristine" class="danger-text">Enter a valid email address</p>
</div>
</div> <!-- ENd of row -->
<div class="row">
<div class="col-md-6 mb-3">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" ng-model="password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" required />
<p class="danger-text" ng-show="myForm.password.$error.required && myForm.password.$touched">Password is required</p>
<p class="danger-text" ng-show="!myForm.password.$error.required && (myForm.password.$error.minlength || myForm.password.$error.maxlength) && myForm.password.$dirty">Passwords must be between 8 and 20 characters.</p>
<p class="danger-text" ng-show="!myForm.password.$error.required && !myForm.password.$error.minlength && !myForm.password.$error.maxlength && myForm.password.$error.pattern && myForm.password.$dirty">Must contain one lower &amp; uppercase letter, and one non-alpha character (a number or a symbol.)</p>
</div> <!-- End of col md 6 -->
<div class="col-md-6 mb-3">
<label>Confirm Password</label>
<input type="password" id="confirm_password" name="confirm_password" class="form-control" ng-model="confirm_password" valid-confirm-password required />
<p class="danger-text" ng-show="myForm.confirm_password.$error.required && myForm.confirm_password.$dirty">Please confirm your password.</p>
<p class="danger-text" ng-show="!myForm.confirm_password.$error.required && myForm.confirm_password.$error.noMatch && myForm.password.$dirty">Passwords do not match.</p>
</div>
</div> <!-- ENd of row -->
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form> <!-- End of form -->
</div> <!-- End of col sm 12 -->
</div> <!-- End of row -->
</div> <!-- End of container -->
</div>

Answer 3

Hay una directiva / proyecto angular en github llamado xtForm . Parece que es un buen comienzo para la validación de campo simplemente angular. XtForm reduce la cantidad de marcado de mensaje de validación después de las etiquetas de entrada.

Enlace al sitio de demostración xtForm

Ejemplo de pequeño uso. No es necesario un marcado adicional (ng-show on spans) para obtener este campo es un mensaje de error / sugerencia de herramienta.

<form xt-form novalidate>
<input name="email" ng-model="modelVal" xt-validate required>
<button type="submit">Submit</button>
</form>

Answer 4

Por favor usa este CSS

.myForm input.ng-invalid.ng-dirty {
background-color: #FA787E;
}
.myForm input.ng-valid.ng-dirty {
background-color: #78FA89;
}

Answer 5

Probablemente sea demasiado tarde para la pregunta, pero podría usar una biblioteca externa para manejar la validación por usted. El validador de forma angular (escrito por mí) lo hace más fácil al tener pocos validadores estándar en su lugar, como

1. Necesario
2. Cadena (min / max longitud)
3. Número (valor mínimo / máximo)
4. Patrón
5. Email
6. Url
7. Igual a (Para verificación de correo electrónico / contraseñas)
8. Personalizado (donde puedes conectar tu propia validación)

Y permite combinar múltiples validadores en un solo campo.

<form name="introform" ng-controller="intro">
<div class="form-group" validator="required[''Field is required''],string[5,20,''Should between 5 and 20 characters'']">
<label for="requiredField">Required Field</label>
<input type="text" class="form-control" id="requiredField" name="requiredField"
placeholder="Required Field" ng-model="model.requiredField">
</div>
<button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>

Answer 6

Prueba este HTML:

<form name="myForm" ng-submit="submitForm()" novalidate>
<!-- NAME -->
<div class="form-group" ng-class="{''has-error'' : myForm.name.$invalid && !myForm.name.$pristine }">
<label>Client Name</label>
<input type="email" name="email" class="form-control" ng-model="formValues.userName" required placeholder="User Name">
<p ng-show="myForm.email.$invalid && !myForm.email.$pristine" class="error">Your email is required.</p>
</div>
<div class="form-group">
<label >Password</label>
<input type="password" name="formValues.password" class="form-control" placeholder="Password" ng-model="formValues.password" ng-maxlength="6" required>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="formValues.confirmPassword" class="form-control" placeholder="Confirm Password" ng-model="formValues.confirmPassword" required>
<span class="error" ng-if="formValues.confirmPassword" ng-show="formValues.password!=formValues.confirmPassword">password should not match</span>
</div>
<div class="form-group">
<label>First Name</label>
<input type="text" name="formValues.firstName" class="form-control" placeholder="First Name" ng-model="formValues.firstName" ng-keyup="acceptAlphabets(formValues.firstName,$event)" required>
<span class="error" ng-show="myString">Accept only letters</span>
<span class="error" ng-show="myStringLength">Accept only 50 characters</span>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="formValues.larstName" class="form-control" placeholder="Last Name" ng-model="formValues.larstName" required>
</div>
<div class="form-group">
<label>Date Of Birth</label>
<input type="text" name="formValues.dateOfBirth" class="form-control" id="exampleInputPassword1" placeholder="Date Of Birth" ng-model="formValues.dateOfBirth" ng-keyup="dateFun(formValues.dateOfBirth,$event)" required>
<span class="error" ng-show="dateVal">Incorrect Format, should be MM/DD/YYYY</span>
</div>
<button type="submit" class="btn btn-primary" ng-disabled="myForm.$invalid" ng-model="formValues.submit">Submit</button>
</form>

Answer 7

Puedes usar Angular-Validator .

Va a

1. Mostrar el mensaje de error requerido en rojo (opcionalmente con clases de arranque)
2. Marque el campo como inválido si no pasa el validador
3. Evitar que el formulario se envíe mientras no es válido
4. Solo muestra el mensaje si el campo esta sucio
5. ¡Limpia tu código!

No lo hará

1. Mostrar el mensaje de éxito (la asistencia para los mensajes de éxito estará disponible próximamente).

Ejemplo

<form name="myForm" angular-validator>
<div class="control-group">
<label>Name:</label>
<input type="text"
name="name"
ng-model="user.name"
required-message="''Name is required''"
required/>
</div>
</form>

Una solución para mostrar el mensaje de éxito:

<form name="myForm" angular-validator>
<div class="control-group">
<label>Name:</label>
<input type="text"
name="name"
ng-model="user.name"
required-message="''Name is required''"
required/>
<span ng-show="myForm.names.$valid && myForm.names.$dirty">Great!</span>
</div>
</form>

Echa un vistazo a más Angular-Validator .

Descargo de responsabilidad: Soy el autor de Angular-Validator

Answer 8

Sé que la pregunta es antigua, pero quiero compartir con el mundo mi nueva y sorprendente directiva angular, hice un proyecto en Github y creo que es increíble compararlo con lo que está / estaba disponible ... Me basé en el excelente Laravel PHP Framework y lo puso a disposición bajo Angular ... Dicho lo suficiente, vamos a dar algunos ejemplos:

<!-- example 1 -->
<label for="input1">Simple Integer</label>
<input type="text" validation="integer|required" ng-model="form1.input1" name="input1" />
<!-- example 2 -->
<label for="input2">Alphanumeric + Exact(3) + required</label>
<input type="text" validation="alpha|exact_len:3|required" ng-model="form1.input2" name="input2" />

Así que puedo definir la cantidad de reglas de validación que quiera en una directiva simple validation="min_len:2|max_len:10|required|integer" y el mensaje de error siempre se mostrará en el siguiente <span> ¿No les gusta? ya esta 1 línea de código para su entrada, 1 línea de código para la pantalla de error, no puede ser más simple que eso ... ah, e incluso soy compatible con su Regex personalizado si desea agregar :)

No más Formas agrupadas con 10 líneas de código para 1 entrada cuando lo único que necesita son 2 líneas, ni más, incluso para una entrada con 5 validadores. Y no te preocupes si la forma no se vuelve válida, yo también me encargué de eso, todo se maneja de la mejor manera.

Eche un vistazo a mi proyecto de Github Angular-Validation y separe la palabra =)

EDITAR
Para hacer una experiencia de usuario aún más suave, agregué la validación en el temporizador. El concepto es simple, no moleste al usuario mientras está ocupado escribiendo, pero valide si hace una pausa o cambia la entrada (onBlur) ... ¡Me encanta!
Incluso puede personalizar el temporizador según sus preferencias. Decidí establecer el valor predeterminado en 1 segundo dentro de la directiva, pero si desea personalizarlo, puede llamar como, por ejemplo, typing-limit="5000" para hacer 5 segundos. se acabó el tiempo. Ejemplo completo:

<input type="text" validation="integer|required" typing-limit="5000" ng-model="form1.input1" name="input1" />

EDITAR # 2
También se agregó validación de confirmación de coincidencia de entrada (ej .: confirmación de contraseña), aquí hay un código de muestra

<!-- input match confirmation, as for example: password confirmation -->
<label for="input4">Password</label>
<input type="password" name="input4" ng-model="form1.input4" validation="alpha|min_len:4|required" />
<label for="input4c">Password Confirmation</label>
<input type="password" name="input4c" ng-model="form1.input4c" validation="match:form1.input4,Password|required" />

EDITAR # 3
Refactó la directiva de modo que el requisito de tener un <span> para mostrar el error no sea necesario, la directiva ahora lo maneja por sí mismo, vea el cambio de código reflejado en la parte superior.

MANIFESTACIÓN
Añadida una demostración en vivo en Plunker

Answer 9

Una forma en que podría hacerlo es abstraer su expresión de validación a métodos de alcance:

PLUNKER

HTML

<div class="control-group" ng-class="{error: isInvalid(''name'')}">
<label>Name:</label>
<input type="text" name="name" placeholder="Name" ng-model="user.name" required/>
<span ng-show="isInvalid(''name'')" class="help-inline">Name is required</span>
<span ng-show="isValid(''name'')">Great!</span>
</div>

Controlador

function Ctrl($scope) {
$scope.isInvalid = function(field){
return $scope.myForm[field].$invalid && $scope.myForm[field].$dirty;
};
$scope.isValid = function(field){
return $scope.myForm[field].$valid && $scope.myForm[field].$dirty;
};
}

Answer 10

index.php

<form class="add-task" id="myForm" name="myForm" method="post" ng-submit="submitForm(myForm.$valid)" novalidate>
<div class="form-actions">
<!-- ng-patten for validation -->
<span class="error" ng-show="myForm.username.$error.required">
Required!</span>
<div class="input-group">
<input type="text" ng-model="user2.username" name="username" ng-pattern="example.word" placeholder="User Name" required>
<input type="password" ng-model="user2.password" name="password" placeholder="user password" ng-minlength="4"
ng-maxlength="10" required>
<button class="btn btn-success" ng-show="displayadd" type="submit" ng-click="addUser(user2)" ng-disabled="myForm.$invalid"><i class="glyphicon glyphicon-plus"></i> Add New user</button>
<button class="btn btn-default" ng-show="displayupdate" ng-click="updateUser(user2)" value="Update"ng-disabled="myForm.$invalid"><span class="glyphicon glyphicon-save"></span>Save Change</button>
<p style="color:red" ng-show="myForm.password.$error.minlength" class="help-block">Password Is Very Short.</p>
<p style="color:red" ng-show="myForm.password.$error.maxlength" class="help-block">Password Is Very Long.</p>
</div>
</div>
</form>

En app.js incluye esta función:

 $scope.submitForm = function() {
if ($scope.myForm.$valid) {
alert(''Our Form Is Submited....'');
}
};

Answer 11

<form ng-app="demoApp" ng-controller="validationCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Your Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Your Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>Mobile:<br>
<input type="number" name="number" ng-model="number" required>
<span style="color:red" ng-show="myForm.number.$dirty && myForm.number.$invalid">
<span ng-show="myForm.number.$error.required">Your Phone is required.</span>
<span ng-show="myForm.number.$error.number">Invalid number.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid || myForm.number.$dirty && myForm.number.$invalid">
</p>
</form>
<script>
//This is controller
var app = angular.module(''demoApp'', []);
app.controller(''validationCtrl'', function($scope) {
$scope.user = ''angular'';
$scope.email = ''[email protected]'';
});
</script>