ng-submit في AngularJS: معالجة إرسال النموذج مع مثال

AngularJS ng-إرسال التوجيه

استخدم نانوغرام-إرسال يتم استخدام التوجيه في AngularJS لربط التطبيق بحدث الإرسال الخاص بالمتصفح. لذلك في حالة AngularJS في حدث الإرسال، يمكنك إجراء بعض المعالجة داخل وحدة التحكم نفسها ثم عرض المعلومات المعالجة للمستخدم.

ملاحظة حول الإصدار: انتهى الدعم طويل الأمد لـ AngularJS 1.x في 31 ديسمبر 2021، ويؤكد فريق تطوير الإطار ذلك. انتهى دعم AngularJS رسميًا في يناير 2022، لذا لن تُصدر أي تحديثات أو تصحيحات أمنية لاحقة. كل خطوة وكل جزء من التعليمات البرمجية أدناه يبقى كما هو مكتوب، كمرجع تاريخي. العمل الجديد ينتمي إلى Angular الحديث، الذي يعبر عن نفس الفكرة. (ngSubmit) مرتبط بمجموعة نماذج.

كيفية إرسال نموذج في AngularJS باستخدام ng-submit

عادةً ما تتم معالجة عمليات إرسال المعلومات على صفحة الويب من خلال حدث الإرسال على متصفح الويب. يُستخدم هذا الحدث عادةً لإرسال المعلومات التي ربما يكون المستخدم قد أدخلها على صفحة ويب إلى الخادم لمزيد من المعالجة مثل بيانات اعتماد تسجيل الدخول وبيانات النموذج وما إلى ذلك. ويمكن إرسال المعلومات من خلال طلب GET أو POST.

لنأخذ مثالًا على إرسال نموذج Angular لمعرفة كيفية إرسال النماذج في AngularJS.

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

الرسم التوضيحي أدناه traces that flow, from the topic in the textbox, through the Submit button, to the list item attached below.

نموذج إرسال AngularJS

الآن، سنرى مثالاً على إرسال نموذج AngularJS من وحدة التحكم باستخدام التوجيه ng-submit:

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body  ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">

    <form ng-submit="Display()">
        &nbsp;&nbsp;&nbsp;
        Enter which topic you would like to learn
        <input type="text"  ng-app="sampleApp" ng-model="Topic"><br>

        <input type="submit" value="Submit"/>

        <ul ng-repeat="topicname in AllTopic">
            <li>{{topicname}}</li>
        </ul>
    </form>
</div>

<script>
   var sampleApp = angular.module("sampleApp",[]);

    sampleApp.controller("AngularController",function($scope) {
        $scope.AllTopic=[];
        $scope.Display = function () {
            $scope.AllTopic.push($scope.Topic);
        }
    });
</script>
</body>
</html>

Code التفسير:

1. نبدأ بتعريف عنصر HTML الخاص بالنموذج، والذي سيحتوي على عنصري "مربع النص" و"زر الإرسال" كما هو موضح في مثال حدث إرسال النموذج في Angular. ثم نستخدم توجيه ng-submit في AngularJS لربط الدالة "Display()" بالنموذج. سيتم تعريف هذه الدالة في وحدة التحكم الخاصة بنا، وسيتم استدعاؤها عند إرسال النموذج.
2. لدينا عنصر تحكم في النص حيث يقوم المستخدم بإدخال الموضوع الذي يريد تعلمه. سيتم ربط هذا بمتغير يسمى "الموضوع" والذي سيتم استخدامه في وحدة التحكم الخاصة بنا.
3. يوجد زر إرسال عادي في AngularJS والذي سينقر عليه المستخدم عندما يدخل الموضوع الذي يريده.
4. لقد استخدمنا نانوغرام تكرار التوجيه لعرض عناصر القائمة للموضوعات التي يدخلها المستخدم. يمر التوجيه ng-repeat عبر كل موضوع في المصفوفة "AllTopic" ويعرض اسم الموضوع وفقًا لذلك.
5. في وحدة التحكم الخاصة بنا، نقوم بتعريف متغير مصفوفة يسمى 'AllTopic'. سيتم استخدام هذا المتغير لحفظ جميع المواضيع التي أدخلها المستخدم في الخطوة 2.
6. نحن نقوم بتحديد الكود الخاص بوظيفة Display() الخاصة بنا والتي سيتم استدعاؤها عندما ينقر المستخدم على زر الإرسال. نحن هنا نستخدم وظيفة مصفوفة الدفع لإضافة المواضيع التي أدخلها المستخدم عبر المتغير "Topic" إلى مصفوفتنا "AllTopic".

إذا تم تنفيذ كود نموذج AngularJS بنجاح، فسيتم عرض الإخراج التالي عند تشغيل الكود الخاص بك في المتصفح.
الإخراج:

لرؤية الكود يعمل، أولاً أدخل اسم موضوع مثل "Angular" كما هو موضح أعلاه في مربع النص ثم انقر فوق زر الإرسال.

• بعد النقر على زر الإرسال، سوف ترى العنصر الذي تم إدخاله في مربع النص تمت إضافته إلى قائمة العناصر.
• يتم تحقيق ذلك عن طريق وظيفة Display()، والتي يتم استدعاؤها عند الضغط على زر الإرسال.
• تضيف الدالة Display() النص إلى متغير الصفيف المسمى 'AllTopic.' ويمر توجيه ng-repeat الخاص بنا عبر كل قيمة في متغير المصفوفة "AllTopic" ويعرضها كعناصر قائمة وفقًا لذلك.

ng-submit مقابل ng-click: أيهما يجب استخدامه

يبلغ قطر كلاً من توجيهات AngularJS يمكن استدعاء نفس دالة التحكم، ومع ذلك يستمعان إلى أحداث متصفح مختلفة. ng-submit يجلس على <form> يتم وضع علامة وتتفاعل مع حدث الإرسال، لذلك يتم تشغيلها أيضًا عندما يضغط المستخدم على مفتاح الإدخال داخل حقل. ng-click يجلس على زر ولا يستجيب إلا لنقرة الماوس أو ما يعادلها من التنشيط.

عادةً ما يحسم دعم لوحة المفاتيح الاختيار. نموذج مزود بـ ng-click يتجاهل البرنامج مفتاح الإدخال (Enter) وحده، مما يُحبط المستخدمين عند ملء خانة تسجيل الدخول. (مُحجوز) ng-click بالنسبة للإجراءات التي لا تمثل إرسال نماذج، مثل مسح حقل أو فتح مربع حوار.

لماذا يمنع ng-submit عملية الإرسال الافتراضية للمتصفح؟

يستجيب نموذج HTML عادي لحدث الإرسال عن طريق تحويل حقوله إلى سلسلة نصية وطلب من المتصفح تحميل صفحة جديدة، مما يؤدي إلى تجاهل كل قيمة مخزنة في $scope. ng-submit يمنع هذا التوجيه حدوث ذلك: فهو يستدعي preventDefault() بالنسبة لك، لذا يتم تنفيذ التعبير وتبقى الصفحة الحالية في مكانها. لا $event لا حاجة إلى وسيطة أو استدعاء يدوي.

يتضمن هذا الحظر شرطاً موثقاً واحداً. وفقاً لـ مرجع ngSubmitيتم منع الإجراء الافتراضي فقط عندما لا يحمل النموذج أي بيانات. action, data-action or x-action السمة. أضف أيًا من هذه السمات وسينتقل المتصفح كالمعتاد بعد انتهاء المعالج، وهو السلوك الصحيح لنموذج يتم عرضه من جانب الخادم مع تحسين تدريجي، ومفاجأة في أي مكان آخر.

لأن التوجيه يبتلع كائن الحدث، اقرأ القيم المُرسلة من الخصائص التي نانوغرام نموذج قم بكتابتها على النطاق، أو مررها بشكل صريح، كما في ng-submit="Display(Topic)".

كيفية التحقق من صحة النموذج قبل تشغيل ng-submit

يقبل المثال أعلاه موضوعًا فارغًا، لأنه لا يوجد ما يتحقق من مربع النص أولًا. يقوم AngularJS بإنشاء وحدة تحكم نموذج لكل نموذج مُسمى، وتُعرِض وحدة التحكم هذه العلامات اللازمة للتحكم في الإرسال. أضف novalidate لذلك، يترك المتصفح فقاعات HTML5 الخاصة به معطلة وAngularJS التحقق من صحة النموذج يستحوذ على.

1. أعطِ النموذج أ nameينشر AngularJS وحدة تحكم بهذا الاسم على البيئة المحيطة مراقب نطاق.
2. إضافة novalidate إلى علامة النموذج بحيث يبقى التحقق من صحة المتصفح الأصلي بعيدًا عن الطريق.
3. قم بتحديد الحقول باستخدام required, ng-minlength, ng-maxlength or ng-pattern.
4. احمِ المُعالج بـ $valid، وقم بتمرير وحدة التحكم في النموذج حتى تتمكن الدالة من فحص الحقول الفردية.
5. قم بتعطيل الزر باستخدام ng-disabled يشير إلى $invalidمما يوفر ردود فعل بصرية فورية.

<form name="topicForm" ng-submit="topicForm.$valid && Display(topicForm)" novalidate>
    <input type="text" name="Topic" ng-model="Topic" required>
    <input type="submit" value="Submit" ng-disabled="topicForm.$invalid">
</form>

هناك خطأين مسؤولان عن معظم المشاكل المبلغ عنها في هذا النمط:

• Double تقديم. تجليد ng-click على زر الإرسال أثناء ng-submit يُشغّل المعالج مرتين، مرة لكل حدث. يُحذّر المرجع الرسمي من الجمع بين المعالجين، لذا اختر واحدًا فقط.
• إرسال غير متوقع. أي زر داخل نموذج بدون type="button" يُطلق حدث الإرسال. حدد زري الإلغاء وإعادة التعيين بشكل صريح، وإلا فإنهما يُطلقان معالج الحدث أيضًا.

الحراسة على $valid هذه ميزة إضافية وليست إجراءً أمنياً. لا يزال يتعين إعادة التحقق من صحة القيم على الخادم قبل تخزينها.

الأسئلة الشائعة