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:
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 deusuario.nombre
en el controlador y viceversa.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, comoselect
,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">
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
Validación de formularios:
Puedes usar
ng-model
junto con otras directivas de AngularJS, comong-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>
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.
0 Comments:
Publicar un comentario