¿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?

forms validation angularjs Christian Smith
fuente

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='[email protected]'
       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/

Christian Smith
fuente
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.

David Gonzalez
fuente
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.

Bipin Shilpakar
fuente
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' >
laffuste
fuente
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