¿Cómo puedo requerir condicionalmente entradas de formulario con AngularJS?


234

Supongamos que estamos creando una aplicación de libreta de direcciones (ejemplo artificial) con AngularJS.

Tenemos un formulario para contactos que tiene entradas para correo electrónico y número de teléfono, y queremos requerir uno u otro , pero no ambos : solo queremos que la emailentrada sea requerida si la phoneentrada está vacía o no es válida, y viceversa.

Angular tiene una requireddirectiva, pero en la documentación no está claro cómo usarla en este caso. Entonces, ¿cómo podemos requerir condicionalmente un campo de formulario? ¿Escribir una directiva personalizada?

Respuestas:


463

No hay necesidad de escribir una directiva personalizada. La documentación de Angular es buena pero no completa. De hecho , hay una directiva llamada ngRequired, que toma una expresión angular.

<input type='email'
       name='email'
       ng-model='contact.email' 
       placeholder='your@email.com'
       ng-required='!contact.phone' />

<input type='text'
       ng-model='contact.phone'             
       placeholder='(xxx) xxx-xxxx'
       ng-required='!contact.email' />  

Aquí hay un ejemplo más completo: http://jsfiddle.net/uptnx/1/


55
No debería ser un problema, ¿verdad? Simplemente actualice los condicionales en consecuencia. Si explicas lo que necesitas un poco más, yo (u otra persona aquí) podré mostrarte :)
Puce

1
Como nota al margen, también puede usar una función y hacer una lógica más compleja allí.
Leandro Zubrezki

1
Esta característica ya está documentada: docs.angularjs.org/api/ng/directive/ngRequired
bjunix

25

si desea poner una entrada requerida si se escribe otro:

   <input type='text'
   name='name'
   ng-model='person.name'/>

   <input type='text'
   ng-model='person.lastname'             
   ng-required='person.name' />  

Saludos.


14

Simple puede usar validación angular como:

 <input type='text'
   name='name'
   ng-model='person.name'
   ng-required='!person.lastname'/>

   <input type='text'
   name='lastname'
   ng-model='person.lastname'             
   ng-required='!person.name' /> 

Ahora puede completar el valor en un solo campo de texto. Puedes rellenar el nombre o el apellido. De esta manera, puede utilizar el relleno obligatorio condicional en AngularJs.


Todavía se pueden completar los dos campos, ¿no?
myTerminal

sí, el usuario puede completar tanto el campo, también en esta condición si el usuario llena un campo, el otro campo no es obligatorio
Bipin Shilpakar

13

Para Angular2

<input type='email' 
    [(ngModel)]='contact.email'
    [required]='!contact.phone' >

EDITAR: Esto arroja un error de consola "ExpressionChangedAfterItHasBeenCheckedError: la expresión ha cambiado después de que se verificó". cuando verifico el botón de opción, estoy aplicando esto, pero parece que hace la validación condicional.
Eric Soyke

44
Angular2 + no está etiquetado en esta pregunta. Dado que es esencialmente un marco diferente, esta respuesta no es relevante.
isherwood

1
@isherwood tienes razón. Lo agregué porque terminé aquí buscando en Google. Lo eliminaré si se rechaza o es controvertido.
laffuste

@Iaffuste podría publicar y responder una nueva pregunta para Angular2 + para que sea más fácil para las personas que investigan esto. +1 de todos modos =)
arjel
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.