Curso de AngularJS y REST

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== 8.1 Formularios ======
AngularJS permite saber la siguiente información de un formulario HTML:
  * Si se ha modificado o no.
  * Si son válidos sus campos o no.

En este tema vamos a poner ejemplo siguiendo el siguiente formulario HTML:
<sxh html>
     <form name="miFormulario" >
       Nombre:<input type="text" ng-model="model.nombre" name="nombre" required >
       <br>
       Correo eletronico:<input type="text" ng-model="model.email" name="email" required>
     </form>
</sxh>

Este formulario contiene 2 validaciones:
  * El campo "nombre" es requerido
  * El campo "email" es requerido


===== FormController =====
Para acceder a la información que proporciona AngularJS sobre el formulario HTML tenemos la clase [[https://docs.angularjs.org/api/ng/type/form.FormController|FormController]]. A la instancia de esta clase se accede a través del ''$scope'' de nuestro controlador. El ''$scope'' tiene una propiedad que se llama como el nombre ((Su propiedad name)) del formulario HTML y que es una instancia de la clase [[https://docs.angularjs.org/api/ng/type/form.FormController|FormController]]

La forma de hacerlo en el ejemplo sería la siguiente:
<sxh js>
var formController=$scope.miFormulario
</sxh>


<note warning>
No es posible acceder a la propiedad del formulario hasta que no ha acabado la inicialización del controlador. Es decir que hasta que no se ha acabado de ejecutar la función del controlador no existe la propiedad.
</note>

Veamos ahora un diagrama UML donde se explican las distintas propiedades de la clase [[https://docs.angularjs.org/api/ng/type/form.FormController|FormController]]

<uml>
class FormController {
  String     $name
  boolean  $pristine
  boolean  $dirty
  boolean  $valid
  boolean  $invalid
  _Error     $error
  NgModelController  nombreCampo1
  NgModelController  nombreCampo2
  NgModelController  nombreCampo3
  ..
  NgModelController  nombreCampoN      
   
}

class NgModelController {
    String     $name
    boolean  $pristine
    boolean  $dirty
    boolean  $valid
    boolean  $invalid
    _Validaciones  $error
}

class _Error {
    NgModelController[]  validacion1
    NgModelController[]  validacion2
    NgModelController[]  validacion3
    ..
    NgModelController[]  validacionN
}

class _Validaciones {
    boolean  validacion1
    boolean  validacion2
    boolean  validacion3
    ..
    boolean  validacionN
}


note right of FormController 
  nombreCampo1, nombreCampo2, etc. 
  Son los nombres de los campos del formulario.
  Ej. Es el atributo 'name' de un <input>
end note

note right of _Error
  validacion1, validacion2 , etc. 
  son cada una de las validaciones que 
  están fallando a nivel de todo el formulario. 
  De forma estándar sus posibles valores son:
  email, max, maxlength, min, minlength,
  number, pattern, required y url 
end note

note left of _Validaciones
  validacion1, validacion2 , etc. 
  son cada una de las validaciones que 
  se están validando en ese control. 
  De forma estándar sus posibles valores son:
  email, max, maxlength, min, minlength,
  number, pattern, required y url
end note

FormController  --> NgModelController
NgModelController --> _Validaciones  
FormController  --> _Error
</uml>


  * Tanto la clase [[https://docs.angularjs.org/api/ng/type/form.FormController|FormController]] como la clase [[https://docs.angularjs.org/api/ng/type/ngModel.NgModelController|NgModelController]] disponen de más propiedades y/o métodos,  algunos de los cuales se verán en otras unidades y algunos otros no los veremos en este curso.
  * La clase [[https://docs.angularjs.org/api/ng/type/ngModel.NgModelController|NgModelController]] no se verá en profundidad hasta la unidad [[unidades:13_formulariosadv:00_start]] ya que es necesario tener conocimientos avanzados de directivas para comprenderla completamente.
  * Durante esta unidad vamos a ir explicando cada una de las propiedades de estas clases.
  * Los nombres de clases de ''_Error '' y ''_Validaciones '' no son nombres que existan como tal en AngularJS pero los he creado para representar las forma de las propiedades ''FormController.$error'' y ''NgModelController.$error''. Es decir que tienen esa información pero en ningún sitio de la documentación de AngularJS aparecen esos 2 nombres.


¿Qué vamos a conseguir con este pequeño monstruo de clase enrevesadas? Como ya hemos dicho, poder saber en todo momento el estado del formulario y de todos sus campos.
===== Cambios =====
Lo primero que podemos saber del formulario es si algo se ha modificado en los campos del formulario, para lo que AngularJS dispone de las propiedades:
  * ''$pristine'': Vale ''true'' si el formulario o campo aún no ha sido modificado por el usuario, si no vale ''false''.
  * ''$dirty'': Vale ''true'' si el formulario o campo ya ha sido modificado por el usuario, si no vale ''false''.

Como podemos imaginar ''$pristine'' siempre vale lo contrario de ''$dirty'' y viceversa.

Estas propiedades se pueden aplicar tanto a nivel de formulario como a nivel de un campo concreto.

Veamos ahora algunos ejemplos de ellas:
^ Expresión JavaScript  ^ Significado ^
| ''$scope.miFormulario.$pristine'' | Valdrá ''true'' si el usuario no ha modificado ningún campo del formulario "miFormulario" |
| ''$scope.miFormulario.$dirty'' | Valdrá ''true'' si el usuario ya ha modificado algún campo del formulario "miFormulario" |
| ''$scope.miFormulario.nombre.$pristine'' | Valdrá ''true'' si el usuario no ha modificado el campo "nombre" del formulario "miFormulario" |
| ''$scope.miFormulario.nombre.$dirty'' | Valdrá ''true'' si el usuario ya ha modificado el campo "nombre" del formulario "miFormulario" |
| ''$scope.miFormulario.email.$pristine'' | Valdrá ''true'' si el usuario no ha modificado el campo "email" del formulario "miFormulario" |
| ''$scope.miFormulario.email.$dirty'' | Valdrá ''true'' si el usuario ya ha modificado el campo "email" del formulario "miFormulario" |

===== Validez =====
Lo siguiente que podemos comprobar es si los valores del formulario o de algún campo son o no válidos ((En el siguiente tema ya veremos cómo hacer las validaciones y cuáles existen)). Para ello AngularJS dispone de las siguientes propiedades:
  * ''$valid'' : Vale ''true'' si el formulario o el campo son válidos, es decir, si cumplen todas las validaciones que se han indicado en los campos.
  * ''$invalid'' : Vale ''true'' si el formulario o el campo son inválidos, es decir, si se incumple alguna de las validaciones que se han indicado en los campos.

Como podemos imaginar ''$valid'' siempre vale lo contrario de ''$invalid'' y viceversa.

Estas propiedades se pueden aplicar tanto a nivel de formulario como a nivel de un campo concreto.


Veamos ahora algunos ejemplos de ellas:
^ Expresión JavaScript  ^ Significado ^
| ''$scope.miFormulario.$valid'' | Valdrá ''true'' si todas las validaciones de todos los campos  del formulario "miFormulario" son válidas |
| ''$scope.miFormulario.$invalid'' | Valdrá ''true'' si alguna validación de alguno de los campos del formulario "miFormulario" es inválida |
| ''$scope.miFormulario.nombre.$valid'' | Valdrá ''true'' si todas las validaciones del campo "nombre" del formulario "miFormulario" son válidas |
| ''$scope.miFormulario.nombre.$invalid'' | Valdrá ''true'' si alguna validación del campo "nombre" del formulario "miFormulario" es inválida |
| ''$scope.miFormulario.email.$valid'' | Valdrá ''true'' si todas las validaciones del campo "email" del formulario "miFormulario" son válidas |
| ''$scope.miFormulario.email.$invalid'' | Valdrá ''true'' si alguna validación del campo "email" del formulario "miFormulario" es inválida |


===== Ejemplo =====
El ejemplo contiene el siguiente formulario:
<sxh html>
     <form name="miFormulario" novalidate>
       Nombre:<input type="text" ng-model="model.nombre" name="nombre" required >
       <br>
       Correo electrónico:<input type="text" ng-model="model.email" name="email" required>
     </form>
</sxh>

En el que los campos "nombre" y "email" son requeridos. Se puede ver el estado de todas las variable ''$pristine'', ''$dirty'', ''$valid'' y ''$invalid'' a medida que se cambian los datos del formulario.

{{url>http://embed.plnkr.co/CbzFFaBBRAfkqrStbqMU}}
===== Referencias =====
  * [[https://docs.angularjs.org/api/ng/type/form.FormController|/ API Reference / ng / type / form.FormController]]
  * [[https://docs.angularjs.org/guide/forms|/ Developer Guide / Forms]]
  * [[https://docs.angularjs.org/api/ng/type/ngModel.NgModelController|/ API Reference / ng / type / ngModel.NgModelController]]