angularjs - que - ng-hide

¿Cómo compruebo la validez de la forma con angularjs?

Question

Soy muy nuevo en angularjs. Digamos que mi aplicación tiene un formulario. Usando el inspector, noté que si angularjs piensa que el formulario no es válido, agrega una clase inválida ng al formulario. Encantador.

Entonces parece que para verificar si el formulario es válido, necesito contaminar mi código con el selector de Jquery. ¿Cuál es la forma angular de indicar validez de formulario sin usar un controlador de formulario?

Answer 1

Ejemplo

<div ng-controller="ExampleController">
  <form name="myform">
   Name: <input type="text" ng-model="user.name" /><br>
   Email: <input type="email" ng-model="user.email" /><br>
  </form>
</div>

<script>
  angular.module(''formExample'', [])
    .controller(''ExampleController'', [''$scope'', function($scope) {

     //if form is not valid then return the form.
     if(!$scope.myform.$valid) {
       return;
     }
  }]);
</script>

Answer 2

También puede usar myform.$invalid

P.ej

if($scope.myform.$invalid){return;}

Answer 3

formar

• directiva en el módulo ng Directiva que ejemplifica FormController.

Si se especifica el atributo de nombre, el controlador de formulario se publica en el ámbito actual bajo este nombre.

Alias: ngForm

En Angular, las formas se pueden anidar. Esto significa que el formulario externo es válido cuando todas las formas secundarias también son válidas. Sin embargo, los navegadores no permiten anidar elementos, por lo que Angular proporciona la directiva ngForm, que se comporta de forma idéntica pero puede anidarse. Esto le permite tener formularios anidados, lo cual es muy útil cuando usa directivas de validación angular en formularios que se generan dinámicamente utilizando la directiva ngRepeat. Como no puede generar dinámicamente el atributo de nombre de los elementos de entrada mediante la interpolación, debe ajustar cada conjunto de entradas repetidas en una directiva ngForm y anidarlas en un elemento de formulario externo.

Clases de CSS

ng-valid se establece si el formulario es válido.

ng-invalid se establece si el formulario no es válido.

ng-pristine se establece si la forma es prístina.

ng-dirty se establece si el formulario está sucio.

ng-submitted se establece si el formulario fue enviado.

Tenga en cuenta que ngAnimate puede detectar cada una de estas clases cuando se agregan y eliminan.

Envío de un formulario y prevención de la acción predeterminada

Dado que el rol de los formularios en las aplicaciones angulares del lado del cliente es diferente al de las aplicaciones de ida y vuelta clásicas, es deseable que el navegador no traduzca el envío del formulario a una recarga de página completa que envíe los datos al servidor. En cambio, se debe activar alguna lógica de javascript para manejar el envío de formularios de una manera específica de la aplicación.

Por este motivo, Angular evita la acción predeterminada (envío de formularios al servidor) a menos que el elemento tenga un atributo de acción especificado.

Puede usar una de las dos formas siguientes para especificar a qué método javascript se debe llamar cuando se envía un formulario:

ngEnviar la directiva en el elemento de formulario

ngClick directiva en el primer botón o campo de entrada de tipo enviar (entrada [tipo = enviar])

Para evitar la doble ejecución del controlador, use solo una de las directivas ngSubmit o ngClick.

Esto se debe a las siguientes reglas de envío de formularios en la especificación HTML:

Si un formulario tiene solo un campo de entrada, al presionar Enter en este campo, se activa el formulario submit (ngSubmit) si un formulario tiene más de 2 campos de entrada y ningún botón o input[type=submit] luego presionar enter no activa el envío si un formulario tiene uno o más campos de entrada y uno o más botones o input[type=submit] luego presionar enter en cualquiera de los campos de entrada activará el manejador de clics en el primer botón o input[type=submit] (ngClick) y un manejador de envío en la forma adjunta (ngEnviar).

Cualquier cambio pendiente de ngModelOptions tendrá lugar inmediatamente cuando se envíe un formulario adjunto. Tenga en cuenta que los eventos ngClick ocurrirán antes de que se actualice el modelo.

Use ngSubmit para tener acceso al modelo actualizado.

app.js :

angular.module(''formExample'', [])
  .controller(''FormController'', [''$scope'', function($scope) {
    $scope.userType = ''guest'';
  }]);

Forma :

<form name="myForm" ng-controller="FormController" class="my-form">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span>
  userType = {{userType}}
  myForm.input.$valid = {{myForm.input.$valid}}
  myForm.input.$error = {{myForm.input.$error}}
  myForm.$valid = {{myForm.$valid}}
  myForm.$error.required = {{!!myForm.$error.required}}
 </form>

Fuente: AngularJS: API: forma

Answer 4

Cuando coloca la etiqueta <form> dentro de ngApp, AngularJS agrega automáticamente el controlador de formulario (en realidad hay una directiva, llamada form que agrega un comportamiento nessesary). El valor del atributo de nombre estará vinculado en su alcance; así que algo como <form name="yourformname">...</form> satisfará:

Un formulario es una instancia de FormController. La instancia del formulario puede publicarse opcionalmente en el alcance utilizando el atributo de nombre.

Para verificar la validez del formulario, puede verificar el valor de $scope.yourformname.$valid property of scope.

Puede obtener más información en la sección de la Guía del desarrollador sobre formularios.