بررسی فرم ها در فریم ورک AngularJS

بررسی فرم ها در فریم ورک AngularJS

در این پست از وبسایت پرووید، در رابطه با بررسی فرم ها در فریم ورک AngularJS صحبت خواهیم کرد. به ادامه ی مطلب بروید.

در این قسمت از این آموزش از وب سایت پرووید در رابطه با HTML Form ها در برنامه های AngularJS صحبت خواهیم کرد. همان طور که می دانید فرم ها در HTML از Input Control های مختلفی تشکیل شده اند که کاربر می تواند داده هایی در آن ها وارد کند.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core دیدن کنید.

در این قسمت از سری آموزشی AngularJS از وب سایت پرووید در رابطه با نشان دادن فرم ها در برنامه های AngularJS و سپس Submit کردن داده های درون فرم ها صحبت خواهیم کرد.

مثالی از یک فرم در AngularJS

در این آموزش قصد داریم، فرم زیر را ایجاد کنیم.

این فرم علاوه بر دریافت داده های کاربر حاوی دو Button برای Submit کردن و Reset کردن می باشد.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core دیدن کنید.

کدی که در قسمت زیر مشاهده می کنید، مربوط به فرمی است که در قسمت بالا آن را دیدید.

<!DOCTYPE html>
<html ng-app="studentApp">
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-controller="studentController"> 
    <h1>Student Information:</h1>
    <form ng-submit="submitStudnetForm()" >
            <label for="firstName" >First Name: </label><br />
            <input type="text" id="firstName" ng-model="student.firstName" /> <br />

            <label for="lastName">Last Name</label><br />
                <input type="text" id="lastName" ng-model="student.lastName" /> <br />
            <label for="dob" >DoB</label><br />
                <input type="date" id="dob" ng-model="student.DoB" /> <br /><br />

            <label for="gender" >Gender</label> <br />
                <select id="gender" ng-model="student.gender">
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select><br /> <br />
                <span>Training Type:</span><br />
                    <label><input value="online" type="radio" name="training" ng-model="student.trainingType" />Online</label><br />
                    <label><input value="onsite" type="radio" name="training" ng-model="student.trainingType" />OnSite</label> <br /><br />
                <span>Subjects</span><br />
                    <label><input type="checkbox" ng-model="student.maths" />Maths</label> <br />
                    <label><input type="checkbox" ng-model="student.physics" />Physics</label> <br />
                    <label><input type="checkbox"  ng-model="student.chemistry" />Chemistry</label><br /><br />
       
        <input type="submit" value="Submit" />
        <input type="reset" ng-click="resetForm()" value="Reset" />
    </form>
    <script>
        //1. create app module 
        var studentApp = angular.module('studentApp', []);

        //2. create controller
        studentApp.controller("studentController", function ($scope, $http) {
  
            //3. attach originalStudent model object
            $scope.originalStudent = {
                firstName: 'James',
                lastName: 'Bond',
                DoB: new Date('01/31/1980'),
                gender: 'male',
                trainingType: 'online',
                maths: false,
                physics: true,
                chemistry: true
            };

            //4. copy originalStudent to student. student will be bind to a form 
            $scope.student = angular.copy($scope.originalStudent);

            //5. create submitStudentForm() function. This will be called when user submits the form
            $scope.submitStudnetForm = function () {

                var onSuccess = function (data, status, headers, config) {
                    alert('Student saved successfully.');
                };

                var onError = function (data, status, headers, config) {
                    alert('Error occured.');
                }

                $http.post('/student/submitData', { student:$scope.student })
                    .success(onSuccess)
                    .error(onError);

            };

            //6. create resetForm() function. This will be called on Reset button click.  
            $scope.resetForm = function () {
                $scope.student = angular.copy($scope.OriginalStudent);
            };
    });
    </script>    
</body>
</html>

حال به بررسی قدم به قدم این کد می پردازیم.

  • در ابتدا یک HTML Page ایجاد کرده و تمامی Input Control های مورد نیاز را در درون دستور <form> قرار بدهید.
  • در دستور <script> یک Application Module از AngularJS ایجاد کنید.
  • در Application Module ساخته شده در قسمت 2 یک studentController ایجاد کنید.
  • یک Object به نام originalStudent ایجاد کنید و آن را به $scope متصل و یا اصطلاحاً Attach کنید. همچنین تمامی Property های مورد نیاز برای originalStudent را نیز تعریف کنید. این Object در کل دوره حیات برنامه بدون تغییر باقی خواهد ماند.
  • یک Object جدید از نوع student ایجاد کنید و آن را به $scope متصل و یا اصطلاحاً Attach کنید. پس از آن تمامی Property ها و مقادیر آن ها را از originalStudent ساخته شده در مرحله چهارم کپی کرده و در درون این Object جدید قرار بدهید. این Object با استفاده از دستور ng-model به فرم متصل و یا اصطلاحاً Bind خواهد شد. بنابراین اگر کاربر تغییراتی را در درون Input Control فرم ایجاد کند، Property  های مربوط به این Object نیز به صورت خودکار تغییر خواهند کرد.
  • یک Function به نام submitStudnetForm ایجاد کنید که در زمانی که کاربر بر روی دکمه Submit کلیک می کند، صدا زده بشود. کاری که در درون این Function باید انجام بشود ارسال یک Http POST Request به سرور و در کنار آن Submit کردن داده های درون فرم با استفاده از سرویس $http است.

بسته ی آموزش ویدئویی شروع به کار با Angular 2

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی شروع به کار با Angular 2 دیدن کنید.

  • یک Function جدید به نام resetForm() ایجاد کنید که وظیفه اش برگرداندن مقادیر درون فرم به مقادیر موجود در originalStudent ساخته شده می باشد. این موضوع با کپی کردن مقادیر درون Property  های originalStudent به student انجام می شود.
  • دستورات ng-app و ng-controller را اضافه کنید.
  • با استفاده از ng-model اقدام به Bind کردن input control های موجود در HTML به Property های مربوط به student کنید.
  • با استفاده از ng-submit اقدام به صدا زدن فانکشن submitStudentForm() را در زمان رخ دادن Submit Event  از فرم، کنید.
  • با استفاده از ng-submit تابع submitStudentForm() را در زمان رخ دادن رویداد Submit از فرم، صدا بزنید.
  • با استفاده از ng-click اقدام به صدا زدن تابع resetForm() در زمان کلیک شدن باتن Reset کنید.
  • با استفاده از ng-click تابع resetForm() را در زمان کلیک شدن Reset Button صدا کنید.

دقت کنید که یک فرم در AngularJS می تواند توسط یکی از دستورات ng-submit بر روی دستور <form> و یا یا ng-click بر روی <input type=”submit” /> به سرور Submit بشود، ولی  از هر دوی آن ها نمی توانید استفاده کنید.

تفاوت دستور ng-submit و ng-click در این است که دستور ng-submit یک Expression را به رویداد onSubmit اصطلاحاً Bind می کند و این اتفاق زمانی رخ می دهد که فرم دارای یک Action Attribute نباشد. در حالی که دستور ng-click فقط یک Expression از AngularJS را به onclick به عنوان یک Event اصطلاحاً Bind می کند.

نکته مهم دیگر این که اگر از هردوی دستورات ng-submit و ng-click استفاده کنید. فرم مربوطه دو بار Submit خواهد شد.

در این قسمت این آموزش را به پایان می رسانیم و در قسمت بعد در رابطه با Bootstrap Form  صحبت خواهیم کرد.

امیدواریم که این آموزش از وبسایت پرووید نیز مورد توجه تمامی دوستان عزیز قرار گرفته باشد. از شما دعوت می‌کنیم که از دیگر آموزش های ما در رابطه با فریم ورک Angular استفاده کنید. لیست کامل این آموزش ها را می توانید در پست مربوط به آموزش کامل برنامه نویسی تحت وب با Angular مشاهده کنید.

مرتضی گیتی
بدون نظر

ارسال نظر

نظر
نام
ایمیل
وب سایت