¿Cuál es la diferencia entre required y ng-required?

278

¿Cuál es la diferencia entre requiredy ng-required(validación de formulario)?

angularjs required TidharPeer
fuente

Respuestas:

421

Los elementos de formulario AngularJS buscan el requiredatributo para realizar funciones de validación. ng-requiredle permite establecer el requiredatributo en función de una prueba booleana (por ejemplo, solo requiere el campo B, por ejemplo, un número de estudiante , si el campo A tiene un cierto valor, si seleccionó "estudiante" como opción )

Como ejemplo, <input required>y <input ng-required="true">son esencialmente lo mismo

Si se pregunta por qué es así (y no solo make <input required="true">o <input required="false">), se debe a las limitaciones de HTML: el requiredatributo no tiene ningún valor asociado; su mera presencia significa (según los estándares HTML) que el elemento es necesario. entonces angular necesita una forma de establecer / desarmar el valor requerido ( required="false"sería HTML no válido)

Tiago Roldão
fuente
¿Cómo puedo eliminar ng-required respectivamente? Porque probé algunos métodos jquery sin éxito
themhz
28
No estoy seguro de entender la pregunta. En la práctica, nunca usa ng-required = "true", sino más bien ng-required = "scopedVariable" o ng-required = "scopeTruthTest ()", y el valor de variable / function determina si se requiere el elemento. ¡Nunca uses jquery para jugar con estas cosas en una aplicación angular, o tendrás resultados impredecibles!
Tiago Roldão
Vale la pena mencionar que ng-required muestra un mensaje de error de estilo de información sobre herramientas predeterminado que dice 'este campo es obligatorio', que no siempre se desea. Estoy buscando una manera de apagarlo
Adam Spence
2
No lo hace, de verdad. No estoy seguro, pero creo que a lo que se refiere es a la validación html5, que se realiza automáticamente por la mayoría de los navegadores modernos. Si usted quiere tomar el control sobre esto (desactivación de lo que hace el navegador) puede agregar el atributo novalidate: <form method="post" action="/foo" novalidate>. Nuevamente, este es un atributo html5, no relacionado con angularJS.
Tiago Roldão
Hubiera esperado que cuando ng-requiredapunta a una variable de alcance / controlador, Angular la monitorea en busca de cambios y establece el atributo requerido en consecuencia. Mientras que en el caso del requiredatributo HTML simple no tienes ese tipo de flexibilidad. ¿No? Y mientras estamos en el mismo tema, ¿qué pasa ng-attr-required? ¿Es exactamente lo mismo que ng-required?
AsGoodAsItGets 05 de
78

Me gustaría hacer un complemento para la respuesta de tiago :

Suponga que está ocultando un elemento usando ng-showy agregando un requiredatributo en el mismo:

<div ng-show="false">
    <input required name="something" ng-model="name"/>
</div>

arrojará un error algo como:

Un control de formulario no válido con nombre = '' no es enfocable

Esto se debe a que simplemente no puede imponer la requiredvalidación a los hiddenelementos. ¡El uso ng-requiredfacilita la aplicación condicional de la validación requerida, que es simplemente increíble!

I_Debug_Everything
fuente
13
Definitivamente un buen consejo, y también puedes usarlo en ng-iflugar de ng-show/ ng-hidepara esquivar ese problema potencial.
jkjustjoshing
1
Esta debería ser la respuesta aceptada. Si tiene elementos ocultos (ng-show = "false"), hay una diferencia entre ng-required = "true" y solo 'required' como se describe en esta respuesta, y nos metimos en el agua caliente debido a esta diferencia.
Ivan Krivyakov
17

El atributo HTML required="required" es una declaración que le dice al navegador que este campo es obligatorio para que el formulario sea válido. ( required="required"es la forma XHTML, solo usar requiredes equivalente)

El atributo Angular ng-required="yourCondition" significa 'isRequired (yourCondition)' y establece el atributo HTML dinámicamente para usted según su condición.

También tenga en cuenta que la versión HTML es confuso , es que no es posible escribir algo como condicional required="true"o required="false", sólo la presencia de los asuntos de atributos (medios actuales cierto)! Aquí es donde Angular te ayuda ng-required.

Christophe Roussy
fuente
Sí, lamentablemente, el navegador no permite poner verdadero / falso, probablemente considerado demasiado técnico ...
Christophe Roussy