एंगुलर में टू-वे बाइंडिंग क्या है?

दो-तरफ़ा बाइंडिंग उपयोगकर्ताओं को HTML फ़ाइल से डेटा इनपुट करने और इसे टाइपस्क्रिप्ट फ़ाइल और वापस भेजने की अनुमति देता है। यह इनपुट सत्यापन, हेरफेर और बहुत कुछ के लिए उपयोगी है।

एक बार जब आप HTML से टाइपस्क्रिप्ट फ़ाइल में डेटा पास कर लेते हैं, तो आप कुछ व्यावसायिक तर्क को पूरा करने के लिए डेटा का उपयोग कर सकते हैं। एक उदाहरण परिदृश्य होगा यदि आप यह जांचना चाहते हैं कि इनपुट फ़ील्ड में दर्ज किया गया नाम पहले से मौजूद है या नहीं।

आप टू-वे बाइंडिंग का उपयोग कैसे कर सकते हैं?

एंगुलर ऐप्स में टू-वे बाइंडिंग आमतौर पर सेट की जाती है .html फ़ाइल, का उपयोग कर ngModel निर्देश। इनपुट फॉर्म में टू-वे बाइंडिंग कुछ इस तरह दिखाई दे सकती है:

<इनपुट 
 टाइप ="ईमेल"
 आईडी ="ईमेल"
 नाम ="ईमेल"
 प्लेसहोल्डर ="[email protected]"
 [(एनजीमॉडल)]="मेल पता"
/>

में .ts फ़ाइल, द मेल पता वेरिएबल फॉर्म से ईमेल एड्रेस से जुड़ा हुआ है।

ईमेल पता: स्ट्रिंग = ''; 

एंगुलर ऐप में एक उदाहरण फॉर्म कैसे सेट करें

एक मूल ऐप बनाकर, आप संभावित उपयोगकर्ता नाम पहले से मौजूद है या नहीं यह जांचने के लिए दो-तरफ़ा बाइंडिंग का उपयोग कर सकते हैं।

1. एक बनाने के नया कोणीय ऐप.
2. चलाएँ एनजी घटक उत्पन्न करता है एक नया घटक बनाने की आज्ञा। यहीं पर आप फॉर्म को स्टोर करेंगे।

   एनजी घटक उपयोगकर्ता नाम-परीक्षक-फॉर्म उत्पन्न करें

3. अपने सभी कोड को बदलें app.component.html निम्न टैग के साथ फाइल करें:

   <ऐप-यूजरनेम-चेकर-फॉर्म></app-username-checker-form>

4. निम्नलिखित सीएसएस को अपने नए घटक में जोड़ें सीएसएस फ़ाइल, पर स्थित है उपयोगकर्ता नाम-चेकर-form.component.css, फॉर्म को स्टाइल करने के लिए:

   कंटेनर {
    डिस्प्ले: फ्लेक्स;
    पाठ-संरेखण: केंद्र;
    औचित्य-सामग्री: केंद्र;
    संरेखित-आइटम: केंद्र;
    ऊंचाई: 100 वीएच;
   }
   कार्ड {
    चौड़ाई: 50%;
    पृष्ठभूमि का रंग: पीचपफ;
    सीमा-त्रिज्या: 1रेम;
    गद्दी: 1रेम;
   }
   इनपुट {
    सीमा: 3पीएक्स ठोस #1a659e;
    सीमा-त्रिज्या: 5px;
    ऊंचाई: 50 पीएक्स;
    रेखा-ऊंचाई: सामान्य;
    रंग: #1a659e;
    प्रदर्शन क्षेत्र;
    चौड़ाई: 100%;
    बॉक्स-साइज़िंग: बॉर्डर-बॉक्स;
    उपयोगकर्ता-चुनना: ऑटो;
    फ़ॉन्ट-आकार: 16 पीएक्स;
    पैडिंग: 0 6 पीएक्स;
    पैडिंग-लेफ्ट: 12px;
   }
   इनपुट:केंद्र {
    सीमा: 3पीएक्स ठोस #004e89;
   }
   .बीटीएन {
    प्रदर्शन क्षेत्र;
    बाह्यरेखा: 0;
    कर्सर: सूचक;
    सीमा: 2पीएक्स ठोस #1a659e;
    सीमा-त्रिज्या: 3px;
    रंग: #fff;
    पृष्ठभूमि: #1a659e;
    फ़ॉन्ट-आकार: 20 पीएक्स;
    फॉन्ट-वेट: 600;
    रेखा-ऊँचाई: 28px;
    पैडिंग: 12px 20px;
    चौड़ाई: 100%;
    मार्जिन-टॉप: 1रेम;
   }
   .बीटीएन: होवर {
    पृष्ठभूमि: #004e89;
    सीमा: #004e89;
   }
   ।सफलता {
    रंग: #14ae83;
   }
   ।गलती {
    रंग: #fd536d;
   }

5. निम्नलिखित सीएसएस को इसमें जोड़ें src/styles.css समग्र ऐप के फ़ॉन्ट परिवार, पृष्ठभूमि और टेक्स्ट रंग सेट करने के लिए:

   @आयात url("https://fonts.googleapis.com/css2?family=Poppins: wht@300;400&प्रदर्शन = अदला-बदली");
   शरीर {
    फुहारा परिवार: "पोप्पिंस";
    पृष्ठभूमि-रंग: पपायाव्हिप;
    रंग: #1a659e;
   }

6. कोड को इसमें बदलें उपयोगकर्ता नाम-चेकर-form.component.html, यूज़रनेम चेकर फॉर्म जोड़ने के लिए:

   <डिव क्लास ="CONTAINER">
   <डिव क्लास ="कार्ड">
   <एच 1> उपयोगकर्ता नाम परीक्षक </h1>
   <प्रपत्र>
   <इनपुट
    टाइप ="मूलपाठ"
    आईडी ="उपयोगकर्ता नाम"
    नाम ="उपयोगकर्ता नाम"
    प्लेसहोल्डर ="कृपया उपयोगकर्तानाम डालें"
    />
   <बटन क्लास ="btn"> बचाना </button>
   </form>
   </div>
   </div>

7. टर्मिनल में एनजी सर्व कमांड का उपयोग करके अपना ऐप चलाएं।

   एनजी सेवा

8. पर अपना आवेदन देखें http://localhost: 4200/.

HTML और टाइपस्क्रिप्ट फ़ाइलों के बीच डेटा भेजना

अपने को डेटा भेजने के लिए टू-वे बाइंडिंग का उपयोग करें .ts फ़ाइल और वापस .html फ़ाइल। के प्रयोग से यह संभव है ngModel रूप में इनपुट टैग।

1. आयात करें फॉर्ममॉड्यूल में app.module.ts फ़ाइल, और इसे में जोड़ें आयात सरणी:

   आयात {फॉर्म मॉड्यूल} से '@ कोणीय/रूप';
   @NgModule({
   //...
    आयात: [
   // अन्य आयात
    फॉर्ममॉड्यूल
    ],
   //...
   })

2. ए घोषित करें उपयोगकर्ता नाम वर्ग चर में .ts फ़ाइल, उपयोगकर्ता नाम-चेकर-form.component.ts:

   उपयोगकर्ता नाम: स्ट्रिंग = '';

3. में उपयोगकर्ता नाम-चेकर-form.component.html, जोड़ना [(एनजीमॉडल)] साथ उपयोगकर्ता नाम इनपुट टैग में चर। यह टू-वे बाइंडिंग को सक्षम करता है, और फॉर्म के यूजरनेम इनपुट में टाइप की गई कोई भी चीज यूजरनेम वेरिएबल में असाइन हो जाती है .ts फ़ाइल।

   <इनपुट
    टाइप ="मूलपाठ"
    आईडी ="उपयोगकर्ता नाम"
    नाम ="उपयोगकर्ता नाम"
    प्लेसहोल्डर ="कृपया उपयोगकर्तानाम डालें"
    [(एनजीमॉडल)]="उपयोगकर्ता नाम"
   />

4. यह जांचने के लिए कि डेटा को भेजा जा रहा है .ts फ़ाइल, एक बनाएँ बचाना() विधि में उपयोगकर्ता नाम-चेकर-form.component.ts. जब आप फॉर्म जमा करते हैं, तो एप्लिकेशन इस फ़ंक्शन को कॉल करेगा।

   बचाना(): खालीपन {
   सांत्वना देना।लकड़ी का लट्ठा(यह।उपयोगकर्ता नाम);
   }

5. जोड़ें ngSubmit को निर्देश
   में टैग करें उपयोगकर्ता नाम-चेकर-form.component.html, और सेव () विधि को कॉल करें।

   <फॉर्म (ngSubmit)="बचाना()">

6. सेव बटन पर क्लिक करने पर, बचाना() फ़ंक्शन इनपुट फ़ील्ड में दर्ज मान को कंसोल पर प्रिंट करेगा। आप ब्राउज़र के डेवलपर टूल का उपयोग करके कंसोल को रनटाइम पर देख सकते हैं। यदि आप ब्राउज़र DevTools से अपरिचित हैं या कंसोल देख रहे हैं, तो आप इसके बारे में अधिक जान सकते हैं क्रोम DevTools का उपयोग कैसे करें.
7. भेजें उपयोगकर्ता नाम वापस इस पर .html फ़ाइल। कर्ली कोष्ठकों के बीच उपयोगकर्ता नाम चर जोड़ें उपयोगकर्ता नाम-चेकर-form.component.html फ़ाइल, के बाद
   टैग। उपयोगकर्ता नाम चर में संग्रहीत मान प्रदर्शित करने के लिए घुंघराले कोष्ठक का उपयोग करें।

   <h2 *ngIf="उपयोगकर्ता नाम"> उपयोगकर्ता नाम दर्ज किया गया: {{उपयोगकर्ता नाम}} </h2>

   प्रपत्र को समवर्ती रूप से दर्ज किए गए डेटा को दिखाना चाहिए।
8. में उपयोगकर्ता नाम-चेकर-form.component.ts, उपयोगकर्ता नाम पहले से मौजूद है या नहीं, यह जाँचने के लिए कुछ वर्ग चर जोड़ें। ए घोषित करें उपयोगकर्ताओं के नाम कुछ उपयोगकर्ता नामों के साथ सरणी, और एक जोड़ें संदेश स्ट्रिंग जो चेक के उपयोगकर्ता को सूचित करती है। चर isValidUsername सही है अगर दर्ज किया गया उपयोगकर्ता नाम उपयोगकर्ता नाम सरणी में नहीं है।

   उपयोगकर्ता नाम: स्ट्रिंग [] = [ 'बार्ट', 'लिसा', 'तलना', 'लीला' ];
   संदेश: स्ट्रिंग = '';
   isValidउपयोगकर्ता नाम: बूलियन = असत्य;

9. बचाना() विधि को यह जांचना चाहिए कि दर्ज किया गया उपयोगकर्ता नाम पहले से मौजूद उपयोगकर्ता नाम सरणी में है या नहीं। परिणाम के आधार पर, संदेश तदनुसार सेट किया जाएगा।

   बचाना(): खालीपन {
    अगर (यह उपयोगकर्ता नाम! = '') {
   यह.isValidउपयोगकर्ता नाम = !यह.उपयोगकर्ता नाम शामिल हैं (
   यह।उपयोगकर्ता नाम.toLowerCase()
    );
   अगर (यह.isValidUsername) {
   यहसंदेश = 'आपका नया उपयोगकर्ता नाम है'${यह।उपयोगकर्ता नाम}'`;
    } अन्य {
   यहसंदेश = 'उपयोगकर्ता नाम'${यह।उपयोगकर्ता नाम}'पहले ही ले लिया गया है';
    }
    }
   }

10. को पूर्ण करो उपयोगकर्ता नाम-चेकर-form.component.html दर्ज उपयोगकर्ता नाम मौजूद है या नहीं, यह दिखाकर फ़ाइल। के नीचे एक त्रुटि संदेश जोड़ें

    फॉर्म के बाद टैग करें। isValidUsername चर प्रदर्शित संदेश का रंग निर्धारित करने के लिए यहाँ सहायक है।

    <पी * एनजीआईएफ ="उपयोगकर्ता नाम" [एनजी क्लास] ="वैध उपयोगकर्ता नाम है? 'सफलता': 'गलती'">
     {{ संदेश }}
    </पी>

11. आपके ब्राउज़र में लोकलहोस्ट: 4200, उपयोगकर्ता नाम सरणी में मौजूद उपयोगकर्ता नाम दर्ज करने का प्रयास करें: फिर, एक उपयोगकर्ता नाम दर्ज करने का प्रयास करें जो नहीं करता है।

एप्लिकेशन विकसित करते समय डेटा भेजने के लिए टू-वे बाइंडिंग का उपयोग करना

टू-वे बाइंडिंग सत्यापन, जाँच, गणना, और बहुत कुछ के लिए उपयोगी है। यह घटकों को वास्तविक समय में संचार और डेटा साझा करने की अनुमति देता है।

आप किसी ऐप के विभिन्न भागों में टू-वे बाइंडिंग की सुविधाओं का उपयोग कर सकते हैं। एक बार जब आप उपयोगकर्ता से डेटा प्राप्त कर लेते हैं, तो आप व्यावसायिक तर्क को निष्पादित कर सकते हैं और उपयोगकर्ता को परिणामों के बारे में सूचित कर सकते हैं।

कभी-कभी, आप उपयोगकर्ता के डेटा को डेटाबेस में संग्रहीत करना चाहेंगे। आप फायरबेस नोएसक्यूएल डाटाबेस समेत विभिन्न प्रकार के डेटाबेस प्रदाताओं का पता लगा सकते हैं जिनका आप उपयोग कर सकते हैं।