Curso AngularJS - 6. formularios
Descargar como PPTX, PDF1 recomendación2,196 vistas
El documento presenta un análisis detallado sobre la validación y el formato de formularios en AngularJS. Incluye aspectos como la validación de datos, el uso de clases CSS para el estilo de formularios, y la actualización personalizada del modelo mediante la directiva ng-model-options. Además, se proporciona un ejemplo práctico de cómo implementar estas validaciones en un formulario de creación de ficha de paciente.
Curso AngularJS - 6. formularios
- 2. Contenidos Validación de formularios Clases CSS para dar formato a formularios Actualización de modelos personalizada Binding al estado de formularios 2
- 3. Validación de datos Utilizando two-way data binding El modelo de datos asociado a un form no se actualiza hasta que no pasa la validación de un input user.email no se actualiza hasta que el campo tenga una @ El atributo novalidate desactiva la validación nativa del navegador 3 <input type="email" ng-model="user.email" /> <form novalidate class="simple-form"> … </form>
- 4. Clases CSS Angular define clases CSS que ayudan a dar formato a formularios y sus campos ng-valid: el modelo es válido ng-invalid: el modelo no es válido ng-pristine: aún no se ha interactuado con el campo ng-dirty: ya se ha interactuado con el campo ng-touched: el campo ha tenido el foco ng-untouched: el campo no ha tenido el foco 4 <form novalidate class="css-form"> Name: <input type="text" ng-model="user.name" required /><br /> </form> .css-form input.ng-invalid.ng-touched { background-color: #FA787E; } .css-form input.ng-valid.ng-touched { background-color: #78FA89; }
- 5. Actualización del modelo personalizada Por defecto cualquier cambio en un input actualiza el modelo Pero pueden definirse comportamientos personalizados Usando la directiva ngModelOptions updateOn: frente a qué evento actualizarlo debounce: retrasar la actualización Pueden combinarse ambos 5 <input type="text" ng-model=”name" ng-model-options="{ updateOn: 'blur' }" /> <input type="text" ng-model=”name" ng-model-options="{ updateOn: 'blur mousedown' }" /> <input type="text" ng-model="user.name" ng-model-options="{ debounce: 250 }" /> ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
- 6. Binding al estado de formularios Una instancia formulario puede publicarse en el $scope Usando en atributo name También las instancias de sus campos como una propiedad del formulario Esto puede usarse para comprobar su estado Y mostrar errores con ng-show 6 <form name="myForm”> <input name=”myName" type="text" ng-model="name" required/> </form> <pre>Form: {{myForm | json}}</pre> <pre>Input: {{myForm. myName | json}}</pre> <p>{{ myForm.name.$error.required }}</p> <p ng-show="myForm.name.$error.required">Nombre requerido!!!!</p>
- 8. EJERCICIO Formularios 8 Introducir validaciones en los formularios de creación de ficha de paciente Por ejemplo añadir campo email Asegurarse de que la altura y el peso son valores válidos Incluir algún efecto de actualización del modelo personalizada
- 9. Documentación Forms https://docs.angularjs.org/guide/forms ngModelOptions https://docs.angularjs.org/api/ng/directive/ngModelOptions 9
Notas del editor
- #5: $pristine/$dirty tells you whether the user actually changed anything, while $touched/$untouched tells you whether the user has merely been there/visited.