ما هو اتجاهين ملزمة في الزاوية؟

يسمح الربط ثنائي الاتجاه للمستخدمين بإدخال البيانات من ملف HTML وإرسالها إلى ملف TypeScript والعكس. هذا مفيد للتحقق من صحة الإدخال والتلاعب والمزيد.

بمجرد تمرير البيانات من HTML إلى ملف TypeScript ، يمكنك استخدام البيانات لإكمال منطق عمل معين. مثال على ذلك هو ما إذا كنت تريد التحقق مما إذا كان الاسم الذي تم إدخاله في حقل الإدخال موجودًا بالفعل.

كيف يمكنك استخدام التجليد ثنائي الاتجاه؟

عادةً ما يتم تعيين الربط ثنائي الاتجاه في تطبيقات Angular في ملف .لغة البرمجة باستخدام ملف نموذج التوجيه. يمكن أن يبدو الربط ثنائي الاتجاه في نموذج الإدخال كما يلي:

<مدخل 
 اكتب ="بريد إلكتروني"
 معرف ="بريد إلكتروني"
 الاسم ="بريد إلكتروني"
 نائب ="[email protected]"
 [(ngModel)] ="عنوان البريد الإلكتروني"
/>

في ال .ts ملف عنوان البريد الإلكتروني متغير مرتبط بعنوان emailAddress من النموذج.

عنوان البريد الإلكتروني: سلسلة = ''; 

كيفية إعداد نموذج نموذج في تطبيق Angular

من خلال إنشاء تطبيق أساسي ، يمكنك استخدام الربط ثنائي الاتجاه للتحقق مما إذا كان اسم المستخدم المحتمل موجودًا بالفعل.

1. إنشاء تطبيق Angular الجديد.
2. قم بتشغيل نانوغرام إنشاء المكون الأمر لإنشاء مكون جديد. هذا هو المكان الذي ستخزن فيه النموذج.

   ng إنشاء اسم مستخدم مكون من شكل مدقق

3. استبدل كل الكود الموجود في ملف app.component.html ملف بالعلامات التالية:

   <app-username-checker-form></app-username-checker-form>

4. أضف CSS التالية إلى مكوناتك الجديدة .css الملف الموجود في username-checker-form.component.css، لتصميم النموذج:

   .حاوية {
    العرض: فليكس ؛
    محاذاة النص: مركز ؛
    تبرير المحتوى: مركز ؛
    محاذاة العناصر: مركز ؛
    الارتفاع: 100 فولت
   }
   .بطاقة {
    العرض: 50٪؛
    لون الخلفية: خوخ.
    نصف قطر الحدود: 1rem ؛
    الحشو: 1rem.
   }
   مدخل {
    حدود: 3بكسل صلبة # 1a659e ؛
    نصف قطر الحدود: 5 بكسل ؛
    الارتفاع: 50 بكسل ؛
    ارتفاع الخط: عادي ؛
    لون: # 1a659e ؛
    العرض محجوب؛
    العرض: 100٪؛
    حجم الصندوق: مربع الحدود ؛
    مستخدم-يختار: آلي;
    حجم الخط: 16 بكسل ؛
    الحشو: 0 6 بكسل ؛
    المساحة المتروكة: 12 بكسل ؛
   }
   مدخل:ركز {
    حدود: 3بكسل صلبة # 004e89 ؛
   }
   .btn {
    العرض محجوب؛
    المخطط التفصيلي: 0 ؛
    المؤشر: المؤشر.
    حدود: 2بكسل صلبة # 1a659e ؛
    نصف قطر الحدود: 3 بكسل ؛
    لون: #fff ؛
    خلفية: # 1a659e ؛
    حجم الخط: 20 بكسل ؛
    وزن الخط: 600 ؛
    ارتفاع الخط: 28 بكسل ؛
    الحشو: 12 بكسل 20 بكسل ؛
    العرض: 100٪؛
    أعلى الهامش: 1rem ؛
   }
   .btn:يحوم {
    خلفية: # 004e89 ؛
    حدود: # 004e89 ؛
   }
   .نجاح {
    لون: # 14ae83 ؛
   }
   .خطأ {
    لون: # fd536d ؛
   }

5. أضف CSS التالية إلى ملفات src / styles.css لتعيين عائلة الخط والخلفية وألوان النص للتطبيق العام:

   import url ("https://fonts.googleapis.com/css2?family=Poppins: wght @ 300 ؛ 400&عرض = مبادلة");
   جسم {
    خط العائلة: "بوبينز";
    لون الخلفية: بابايا.
    لون: # 1a659e ؛
   }

6. استبدل الكود في username-checker-form.component.html، لإضافة نموذج مدقق اسم المستخدم:

   <فئة div ="حاوية">
   <فئة div ="بطاقة">
   <h1> مدقق اسم المستخدم </h1>
   <استمارة>
   <مدخل
    اكتب ="نص"
    معرف ="اسم المستخدم"
    الاسم ="اسم المستخدم"
    نائب ="الرجاء ادخال اسم المستخدم"
    />
   <فئة الزر ="BTN"> يحفظ </button>
   </form>
   </div>
   </div>

7. قم بتشغيل تطبيقك باستخدام الأمر ng serve في المحطة.

   يخدم ng

8. اعرض طلبك على http://localhost: 4200/.

إرسال البيانات بين ملفات HTML و TypeScript

استخدم الربط ثنائي الاتجاه لإرسال البيانات إلى ملف .ts الملف والعودة إلى .لغة البرمجة ملف. هذا ممكن مع استخدام نموذج في النموذج مدخل العلامات.

1. قم باستيراد ملف النماذج داخل ال app.module.ts ملف ، وإضافته إلى ملف الواردات مجموعة مصفوفة:

   يستورد {FormsModule} من "@ الزاوي / النماذج" ؛
   تضمين التغريدة({
   //...
    الواردات: [
   // واردات أخرى
    النماذج
    ],
   //...
   })

2. تعلن أ اسم المستخدم متغير فئة في .ts ملف، username-checker-form.component.ts:

   اسم المستخدم: سلسلة = '';

3. في username-checker-form.component.html، يضيف [(ngModel)] مع ال اسم المستخدم متغير في علامة الإدخال. يتيح هذا الربط ثنائي الاتجاه ، ويتم تعيين أي شيء مكتوب في إدخال اسم المستخدم للنموذج إلى متغير اسم المستخدم في ملف .ts ملف.

   <مدخل
    اكتب ="نص"
    معرف ="اسم المستخدم"
    الاسم ="اسم المستخدم"
    نائب ="الرجاء ادخال اسم المستخدم"
    [(ngModel)] ="اسم المستخدم"
   />

4. لاختبار تلك البيانات التي يتم إرسالها إلى .ts ملف ، قم بإنشاء ملف يحفظ() طريقة في username-checker-form.component.ts. عند إرسال النموذج ، سيقوم التطبيق باستدعاء هذه الوظيفة.

   يحفظ(): فارغ {
   وحدة التحكم.سجل(هذا.اسم المستخدم)؛
   }

5. أضف ال نانوغرام التوجيه إلى
   العلامات في username-checker-form.component.html، واستدعاء طريقة الحفظ ().

   <النموذج (ngSubmit) ="يحفظ()">

6. عند النقر على زر حفظ ، فإن ملف يحفظ() ستطبع الوظيفة القيمة التي تم إدخالها في حقل الإدخال إلى وحدة التحكم. يمكنك عرض وحدة التحكم في وقت التشغيل باستخدام أدوات مطور المتصفح. إذا لم تكن معتادًا على متصفح DevTools أو عرض وحدة التحكم ، فيمكنك معرفة المزيد حول كيفية استخدام Chrome DevTools.
7. ارسل اسم المستخدم رجوع الى .لغة البرمجة ملف. أضف متغير اسم المستخدم بين الأقواس المتعرجة إلى ملف username-checker-form.component.html الملف ، بعد ملف
   العلامات. استخدم الأقواس المتعرجة لعرض القيمة المخزنة في متغير اسم المستخدم.

   <h2 * ngIf ="اسم المستخدم"> تم إدخال اسم المستخدم: {{اسم المستخدم}} </h2>

   يجب أن يُظهر النموذج البيانات المدخلة بشكل متزامن.
8. في username-checker-form.component.ts، أضف بعض متغيرات الفئة للتحقق مما إذا كان اسم المستخدم موجودًا بالفعل. تعلن أ أسماء المستخدمين مصفوفة تحتوي على عدد قليل من أسماء المستخدمين المأخوذة ، وأضف ملف رسالة السلسلة التي تُعلم المستخدم بالشيك. المتغير isValidUsername يكون صحيحًا إذا لم يكن اسم المستخدم الذي تم إدخاله في مصفوفة أسماء المستخدمين.

   أسماء المستخدمين: سلسلة [] = [ 'بارت', 'ليزا', 'يقلى', 'ليلا' ];
   الرسالة: سلسلة = '';
   isValidUsername: قيمة منطقية = خطأ شنيع;

9. ال يحفظ() يجب أن تتحقق الطريقة مما إذا كان اسم المستخدم الذي تم إدخاله موجود بالفعل في مصفوفة أسماء المستخدمين الحالية أم لا. اعتمادًا على النتيجة ، سيتم تعيين الرسالة وفقًا لذلك.

   يحفظ(): فارغ {
    إذا (this.username! = '') {
   هذا.isValidUsername =!هذا.usernames.includes (
   هذا.اسم المستخدم.toLowerCase()
    );
   لو (هذا.isValidUsername) {
   هذا. الرسالة = "اسم المستخدم الجديد الخاص بك هو"${هذا.اسم المستخدم}'`;
    } آخر {
   هذا. الرسالة = اسم المستخدم${هذا.اسم المستخدم}"تم أخذه بالفعل";
    }
    }
   }

10. أكمل ال username-checker-form.component.html الملف من خلال إظهار ما إذا كان اسم المستخدم الذي تم إدخاله موجودًا أم لا. أضف رسالة خطأ أسفل ملف

    العلامات بعد النموذج. ال isValidUsername المتغير مفيد هنا لتحديد لون الرسالة المعروضة.

    <ع * ngIf ="اسم المستخدم" [ngClass] ="isValidUsername؟ 'نجاح': 'خطأ'">
     {{ رسالة }}
    </ ص>

11. في متصفحك في المضيف المحلي: 4200، حاول إدخال اسم مستخدم موجود في مصفوفة أسماء المستخدمين: بعد ذلك ، حاول إدخال اسم مستخدم لا يفعل ذلك.

استخدام الربط ثنائي الاتجاه لإرسال البيانات عند تطوير تطبيق

يعد الربط ثنائي الاتجاه مفيدًا للتحقق من الصحة والفحوصات والعمليات الحسابية والمزيد. يسمح للمكونات بالاتصال ومشاركة البيانات في الوقت الفعلي.

يمكنك استخدام ميزات الربط ثنائي الاتجاه في أجزاء مختلفة من التطبيق. بمجرد استلام البيانات من المستخدم ، يمكنك تنفيذ منطق الأعمال وإبلاغ المستخدم بالنتائج.

في بعض الأحيان ، قد ترغب في تخزين بيانات المستخدم في قاعدة بيانات. يمكنك استكشاف أنواع مختلفة من موفري قواعد البيانات التي يمكنك استخدامها ، بما في ذلك قاعدة بيانات Firebase NoSQL.