w3schools validar formulario form con campos forms validation angularjs

forms - con - validar formulario angular 6



Mostrar el borde rojo de todos los campos no válidos después de enviar el formulario angularjs (3)

Artículo de referencia: Mostrar borde de color rojo para campos de entrada no válidos angualrjs

Usé ng-class en todos los campos de entrada.

<input type="text" ng-class="{submitted:newEmployee.submitted}" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/>

cuando hago clic en el botón Guardar, estoy cambiando el valor del nuevoEmpleado.enviado a verdadero (puede verificarlo en mi pregunta). Así que cuando hago clic en guardar, una clase llamada submit se agrega a todos los campos de entrada (hay algunas otras clases agregadas inicialmente por angularjs).

Así que ahora mi campo de entrada contiene clases como esta

class="ng-pristine ng-invalid submitted"

ahora estoy usando el código de abajo css para mostrar el borde rojo en todos los campos de entrada no válidos (después de enviar el formulario)

input.submitted.ng-invalid { border:1px solid #f00; }

Gracias !!

Actualizar:

Podemos agregar la clase ng en el elemento de formulario en lugar de aplicarlo a todos los elementos de entrada. Por lo tanto, si se envía el formulario, se agrega una nueva clase (enviada) al elemento del formulario. A continuación, podemos seleccionar todos los campos de entrada no válidos utilizando el selector a continuación

form.submitted .ng-invalid { border:1px solid #f00; }

Tengo un formulario en el que tengo algunos campos de entrada. Algunos de ellos son campos obligatorios y algunos son campos de correo electrónico .

Estoy usando el atributo requerido html5 para los campos requeridos y el atributo type = "email" para los campos de correo electrónico.

Mi pregunta es después de hacer clic en el botón enviar, tengo que mostrar el borde rojo para todos los campos no válidos.

Esta es mi forma

<form name="addRelation"> <label>First Name</label> <input type="text" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.FirstName.$error.required">first Name is required</span><br/> <label>Last Name</label> <input type="text" placeholder="Last Name" data-ng-model="model.lastName" id="LastName" name="LastName" required/><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.LastName.$error.required">Last Name is required</span><br/> <label>Email</label> <input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.required">Email address is required</span><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/> <input class="btn" data-ng-click="save(model)" type="button" value="SAVE" /> </form>

y mi función de guardar

$scope.save= function (model) { if ($scope.addRelation.$valid) { //form is valid- so save it to DB } else { //if form is not valid set $scope.addRelation.submitted to true $scope.addRelation.submitted=true; } }; })

Ahora, cuando hago clic en el botón Guardar sin rellenar nada, se muestran todos los errores (intervalos). Pero quiero mostrar el borde rojo para todos los campos inválidos.

He intentado seguir casos:

input.ng-dirty.ng-invalid{border:1px solid black;}

pero esto falla cuando un usuario hace clic en el botón de enviar directamente. (sin tocar los campos de entrada)

input.ng-invalid{border:1px solid black;}

esto muestra el borde rojo tan pronto como el usuario abre un formulario de registro.

Por favor ayuda.

He creado un ejemplo de CodePen en funcionamiento para demostrar cómo puede lograr sus objetivos.

Agregué ng-click a <form> y eliminé la lógica de su botón:

<form name="addRelation" data-ng-click="save(model)"> ... <input class="btn" type="submit" value="SAVE" />

Aquí está la plantilla actualizada:

<section ng-app="app" ng-controller="MainCtrl"> <form class="well" name="addRelation" data-ng-click="save(model)"> <label>First Name</label> <input type="text" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.FirstName.$invalid">First Name is required</span><br/> <label>Last Name</label> <input type="text" placeholder="Last Name" data-ng-model="model.lastName" id="LastName" name="LastName" required/><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.LastName.$invalid">Last Name is required</span><br/> <label>Email</label> <input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.required">Email address is required</span> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/> <input class="btn" type="submit" value="SAVE" /> </form> </section>

y código de controlador:

app.controller(''MainCtrl'', function($scope) { $scope.save = function(model) { $scope.addRelation.submitted = true; if($scope.addRelation.$valid) { // submit to db console.log(model); } else { console.log(''Errors in form data''); } }; });

Espero que esto ayude.