Enlace de datos en formularios

En AngularJS, el enlace de datos en formularios se logra principalmente utilizando la directiva ng-model. Esta directiva permite vincular datos entre el modelo y la vista, lo que facilita la sincronización de los valores del formulario con el modelo de datos en el controlador. Aquí te muestro cómo puedes usar el enlace de datos en formularios en tu aplicación AngularJS:

1. Enlace de datos con ng-model:

   Utiliza la directiva ng-model para vincular los datos del formulario con propiedades en el modelo de tu controlador. Por ejemplo, en un campo de entrada de texto:

   <input type="text" ng-model="usuario.nombre">

   En este ejemplo, usuario.nombre se vincula al valor del campo de entrada de texto. Cualquier cambio en el campo de entrada actualizará automáticamente el valor de usuario.nombre en el controlador y viceversa.

2. Enlace de datos en otros tipos de elementos de formulario:

   Además de los campos de entrada de texto, ng-model se puede utilizar en otros tipos de elementos de formulario, como select, textarea, input[type="checkbox"], input[type="radio"], etc.

   <select ng-model="usuario.rol">
     <option value="admin">Administrador</option>
     <option value="usuario">Usuario</option>
   </select>
   
   <textarea ng-model="usuario.descripcion"></textarea>
   
   <input type="checkbox" ng-model="usuario.activo">
   
   <input type="radio" ng-model="usuario.sexo" value="masculino">
   <input type="radio" ng-model="usuario.sexo" value="femenino">

3. Uso de ng-model con objetos y matrices:

   ng-model también puede utilizarse con objetos y matrices en el modelo. Por ejemplo:

   $scope.usuario = {
     nombre: '',
     roles: ['usuario']
   };
   <input type="text" ng-model="usuario.nombre">
   <input type="checkbox" ng-model="usuario.roles[0]" value="usuario"> Usuario
   <input type="checkbox" ng-model="usuario.roles[1]" value="admin"> Administrador

4. Validación de formularios:

   Puedes usar ng-model junto con otras directivas de AngularJS, como ng-required, ng-pattern, ng-minlength, ng-maxlength, etc., para validar los datos del formulario.

   <input type="text" ng-model="usuario.email" ng-pattern="/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/">
   <span ng-if="formulario.email.$error.pattern">Formato de correo electrónico inválido</span>

5. Envío de datos del formulario:

   Para enviar los datos del formulario, puedes utilizar la directiva ng-submit en el formulario.

   <form ng-submit="guardarUsuario()">
     <!-- Campos del formulario -->
     <button type="submit">Guardar</button>
   </form>

   En el controlador, defines la función guardarUsuario() que se llama cuando se envía el formulario.

Con estos pasos, has aprendido cómo usar el enlace de datos en formularios en tu aplicación AngularJS utilizando la directiva ng-model. Esto te permite mantener una sincronización bidireccional entre los datos del formulario y el modelo de datos en el controlador, facilitando la manipulación y validación de los datos del usuario.