AngularJS ফর্ম

অ্যাংগুলারজেসের ফর্মটি ইনপুট ইনগ্রেডিয়েন্টটির ডেটা বাইন্ডিং ও পরীক্ষণ প্রদান করে

ইনপুট ইনগ্রেডিয়েন্ট

ইনপুট ইনগ্রেডিয়েন্টটি

• ইনপুট ইনগ্রেডিয়েন্টটি এইম্‌স এলিমেন্ট
• ইনপুট এলিমেন্ট
• সিলেক্ট এলিমেন্ট
• বাটন এলিমেন্ট

টেক্সট এলিমেন্ট

ডেটা বাইন্ডিং ইনস্ট্রাকশন অ্যাপ্লিকেশন কন্ট্রোলারকে নির্দিষ্ট করে ইনগ্রেডিয়েন্ট ইনগ্রেডিয়েন্টটি ডেটা বাইন্ডিং প্রদান করে

<input type="text" ng-model="firstname">

এখন, এই অ্যাপ্লিকেশনে একটি নামকরণ firstname এর প্রকৃতি

ইনস্ট্রাকশন অ্যাপ্লিকেশন কন্ট্রোলারকে নির্দিষ্ট করে ইনগ্রেডিয়েন্ট কন্ট্রোলারটি আপনার অ্যাপ্লিকেশনের বাকি অংশের সাথে বাঁধা হয়

প্রকৃতি firstnameএবং কন্ট্রোলারে উল্লেখ করা যেতে পারে:

উদাহরণ

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.firstname = "Bill";
$scope.reset();
});

</script>

এটি অ্যাপ্লিকেশনের অন্যান্য স্থানেও উল্লেখ করা যেতে পারে:

উদাহরণ

<form>
  নাম: <input type="text" ng-model="firstname">
</form>
<h1>আপনার ইনপুট হল: {{firstname}}</h1>

</script>

চেকবক্স

চেকবক্সের মান true বা false। ইনস্ট্রাকশন অ্যাপ্লিকেশন কন্ট্রোলারকে নির্দিষ্ট করে ইনগ্রেডিয়েন্টটি চেকবক্সে প্রয়োগ করা হয়, এবং আপনার অ্যাপ্লিকেশনে তার মান ব্যবহার করা হবে。

উদাহরণ

চেকবক্স সিলিভ হলে, শিরোনাম দেখানো হবে:

<form>
  শিরোনাম দেখানোর জন্য সিলিভ করুন:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">আমার শিরোনাম</h1>

</script>

রেডিও বটন

ড্রপডাউন সিলেকশন বক্স ইনস্ট্রাকশন অ্যাপ্লিকেশন কন্ট্রোলারকে নির্দিষ্ট করে ইনগ্রেডিয়েন্টটি আপনার অ্যাপ্লিকেশনের সাথে রেডিও বটনকে বাঁধে

একই ইনস্ট্রাকশন অ্যাপ্লিকেশন কন্ট্রোলারকে নির্দিষ্ট করে রেডিও বটনটির বিভিন্ন মান থাকতে পারে, কিন্তু শুধুমাত্র নির্বাচিত মানটি ব্যবহার করা হবে。

উদাহরণ

নির্বাচিত রেডিও বটনের মান অনুযায়ী টেক্সট দেখানো হবে:

<form>
  একটি বিষয় নির্বাচন করুন:
  <input type="radio" ng-model="myVar" value="dogs">কুকুর
  <input type="radio" ng-model="myVar" value="tuts">টিউটোরিয়াল
  <input type="radio" ng-model="myVar" value="cars">কার
</form>

</script>

myVar的值将是 dogs、tuts বা cars。

myVar এর মান হবে

ড্রপডাউন সিলেকশন বক্স ইনস্ট্রাকশন অ্যাপ্লিকেশন কন্ট্রোলারকে নির্দিষ্ট করে ইনডারেক্টিভ সিলেকশন বক্সকে আপনার অ্যাপলিকেশনের সাথে সংযুক্ত করবে।

ইনস্ট্রাকশন অ্যাপ্লিকেশন কন্ট্রোলারকে নির্দিষ্ট করে সম্পদের সময় নির্বাচিত অপশনের মান হবে।

উদাহরণ

নির্বাচিত অপশনের মান অনুযায়ী টেক্সট দেখানো হবে:

<form>
  নির্বাচন করুন:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

</script>

myVar এর মান হবে dogs、tuts বা cars。

AngularJS ফর্মের উদাহরণ

অ্যাপলিকেশন কোড

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    নাম: <br>
    <input type="text" ng-model="user.firstName"><br>
    পরিবারনাম: <br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">রিসেট</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.master = {firstName: "Bill", lastName: "Gates"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  ;
  $scope.reset();
$scope.reset();
});

</script>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন novalidate

এক্সপ্রেস হল একটি নতুন HTML5 অ্যাট্রিবিউট। এটা কোনো ডিফল্ট ব্রাউজার ভ্রমণকে নিষ্ক্রিয় করে

একস্প্লেইন করা হয়েছে ng-app

ইনস্ট্রাকশন AngularJS অ্যাপ্লিকেশনকে নির্দিষ্ট করে ng-controller

ইনস্ট্রাকশন অ্যাপ্লিকেশন কন্ট্রোলারকে নির্দিষ্ট করে ng-model

ইনস্ট্রাকশন দুটি ইনপুট ইলিমেন্টকে মডেলের user অবজেক্টে বাঁধে formCtrl মাস্টার নিয়ন্ত্রককে reset() পদ্ধতি।

reset() পদ্ধতি অবজেক্টকে প্রাথমিক মান সমায়োজন করে, এবং user অবজেক্ট সমান হয় মাস্টার অবজেক্ট।

ng-click ইনস্ট্রাকশন শুধুমাত্র বটন ক্লিক করার সময় ব্যবহৃত হয় reset() পদ্ধতি।

এই অ্যাপ্লিকেশন novalidate অ্যাট্রিবিউট ব্যবহার করে না, কিন্তু সাধারণত AngularJS ফর্মে এটা ব্যবহার করা হয়, যাতে স্ট্যান্ডার্ড HTML5 ভ্রমণকে অবরূপ করা যায়。