मैं सशर्त रूप से AngularJS के साथ इनपुट की आवश्यकता कैसे कर सकता हूं?

Question

मान लें कि हम AngularJS के साथ एक पता पुस्तिका आवेदन (वंचित उदाहरण) का निर्माण कर रहे हैं।

हमारे पास संपर्कों के लिए एक फॉर्म है जिसमें ईमेल और फोन नंबर के लिए इनपुट हैं, और हम एक या दूसरे की आवश्यकता चाहते हैं , लेकिन दोनों नहीं : हम केवल emailइनपुट की आवश्यकता चाहते हैं यदि phoneइनपुट खाली या अमान्य है, और इसके विपरीत।

कोणीय का एक requiredनिर्देश है, लेकिन यह प्रलेखन से स्पष्ट नहीं है कि इस मामले में इसका उपयोग कैसे किया जाए। तो हम सशर्त रूप से फॉर्म फील्ड की आवश्यकता कैसे कर सकते हैं? एक कस्टम निर्देश लिखें?

Answer 1

कोई कस्टम निर्देश लिखने की आवश्यकता नहीं है। कोणीय का प्रलेखन अच्छा है लेकिन पूर्ण नहीं है। वास्तव में , एक निर्देश कहा जाता है ngRequired, जो एक कोणीय अभिव्यक्ति लेता है।

<input type='email'
       name='email'
       ng-model='contact.email' 
       placeholder='[e-mail]'
       ng-required='!contact.phone' />

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

यहाँ एक और अधिक पूर्ण उदाहरण है: http://jsfiddle.net/uptnx/1/

Comments

यह एक समस्या नहीं होनी चाहिए, है ना? बस उसी के अनुसार सशर्त अपडेट करें। यदि आप यह समझाते हैं कि आपको और क्या चाहिए, तो मुझे (या यहाँ के अन्य व्यक्ति) आपको दिखाने में सक्षम हो जाएगा :)

— Puce

एक साइड नोट के रूप में, आप एक फ़ंक्शन का उपयोग भी कर सकते हैं और वहां अधिक जटिल तर्क कर सकते हैं।

— लिएंड्रो जुबेरज़की

यह सुविधा अब तक प्रलेखित है: docs.angularjs.org/api/ng/directive/ngRequired

— bjunix

Answer 2

यदि आप एक इनपुट डालना चाहते हैं यदि अन्य लिखा है:

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

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

सादर।

Answer 3

सरल आप कोणीय सत्यापन का उपयोग कर सकते हैं जैसे:

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

अब आप केवल एक पाठ फ़ील्ड में मान भर सकते हैं। या तो आप नाम या अंतिम नाम भर सकते हैं। इस तरह आप AngularJs में सशर्त आवश्यक भरण का उपयोग कर सकते हैं।

Comments

एक अभी भी दोनों क्षेत्रों में भर सकता है, वे नहीं कर सकते?

— मायटर्मिनल

हाँ उपयोगकर्ता दोनों फ़ील्ड भर सकता है, इस स्थिति में भी यदि उपयोगकर्ता एक फ़ील्ड भरता है, तो दूसरा फ़ील्ड अनिवार्य नहीं है

— Bipin Shilpakar

Answer 4

Angular2 के लिए

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

Comments

EDIT: यह एक कंसोल एरर फेंक रहा है "ExpressionChangedAfterItHasBeenCheckedError: इसे चेक करने के बाद एक्सप्रेशन बदल गया है।" जब मैं रेडियो बटन की जांच कर रहा हूं, तो मैं इसे लागू कर रहा हूं, लेकिन यह सशर्त सत्यापन करने के लिए प्रकट होता है।

— एरिक सोयके

इस सवाल पर Angular2 + को टैग नहीं किया गया है। चूंकि यह अनिवार्य रूप से एक अलग रूपरेखा है, इसलिए यह उत्तर प्रासंगिक नहीं है।

— इशरवुड

@isherwood आप सही हैं। मैंने इसे जोड़ा क्योंकि मैं उस के लिए गुगली करते हुए यहां समाप्त हो गया। अगर इसे कम या विवादास्पद माना जाता है तो मैं इसे हटा दूंगा।

— laffuste

@ यदि आप इसे देख रहे लोगों के लिए आसान बनाने के लिए Angular2 + के लिए एक नए प्रश्न पर पोस्ट और उत्तर दे सकते हैं। +1 वैसे =)

— arjel

Answer 5

एंगुलरजेएस (संस्करण 1.x) में, एक अंतर्निहित निर्देश है ngRequired

<input type='email'
       name='email'
       ng-model='user.email' 
       placeholder='[e-mail]'
       ng-required='!user.phone' />

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

Angular2 या उससे ऊपर में

<input type='email'
       name='email'
       [(ngModel)]='user.email' 
       placeholder='[e-mail]'
       [required]='!user.phone' />

<input type='text'
       [(ngModel)]='user.phone'             
       placeholder='(xxx) xxx-xxxx'
       [required]='!user.email' />