Come posso richiedere condizionalmente input di modulo con AngularJS?

234

Supponiamo di creare un'applicazione per la rubrica (esempio inventato) con AngularJS.

Abbiamo un modulo per i contatti che ha input per e-mail e numero di telefono e vogliamo richiedere l' uno o l'altro , ma non entrambi : vogliamo che l' emailinput sia richiesto solo se l' phoneinput è vuoto o non valido e viceversa.

Angular ha una requireddirettiva, ma dalla documentazione non è chiaro come usarla in questo caso. Quindi, come possiamo richiedere condizionalmente un campo modulo? Scrivi una direttiva personalizzata?

forms validation angularjs

— Christian Smith
fonte

463

Non è necessario scrivere una direttiva personalizzata. La documentazione di Angular è buona ma non completa. In effetti , esiste una direttiva chiamata ngRequired, che assume un'espressione angolare.

<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' />

Ecco un esempio più completo: http://jsfiddle.net/uptnx/1/

— Christian Smith
fonte

5

Non dovrebbe essere un problema, giusto? Basta aggiornare i condizionali di conseguenza. Se spieghi di cosa hai bisogno un po 'di più, io (o un'altra persona qui) sarò in grado di mostrarti :)

— Puce

1

Come nota a margine, puoi anche usare una funzione e fare logiche più complesse lì.

— Leandro Zubrezki,

1

Questa funzione è ormai documentata: docs.angularjs.org/api/ng/directive/ngRequired

— bjunix

25

se vuoi inserire un input richiesto se ne è scritto altro:

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

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

Saluti.

— David Gonzalez
fonte

14

Semplice è possibile utilizzare la validazione angolare come:

 <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' />

Ora puoi riempire il valore in un solo campo di testo. Puoi inserire il nome o il cognome. In questo modo è possibile utilizzare il riempimento condizionato richiesto in AngularJs.

— Bipin Shilpakar
fonte

Si possono ancora compilare entrambi i campi, no?

— myTerminal,

sì, l'utente può compilare entrambi i campi, anche in questa condizione se l'utente riempie un campo, l'altro campo non è obbligatorio

— Bipin Shilpakar,

13

Per Angular2

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

— laffuste
fonte

EDIT: Questo genera un errore della console "ExpressionChangedAfterItHasBeenCheckedError: Expression è cambiata dopo che è stata controllata." quando controllo il pulsante di opzione lo sto applicando, ma sembra fare la convalida condizionale.

— Eric Soyke,

4

Angular2 + non è taggato su questa domanda. Poiché si tratta essenzialmente di un framework diverso, questa risposta non è pertinente.

— Isherwood,

1

@isherwood hai ragione. L'ho aggiunto perché sono finito qui mentre cercavo su Google. Lo eliminerò se viene retrocesso o controverso.

— Laffuste,

@Iaffuste potresti pubblicare e rispondere a una nuova domanda per Angular2 + per facilitare le persone che lo esaminano. +1 comunque =)

— arjel