অ্যাঙ্গুলার জেএস (AngularJS) ফরম (Forms)
Article By : Protap Chandra
--------
আজকের টিউটরিয়ালে আমরা AngularJS ফরম সম্পর্কে জানব। AngularJS ফরম হচ্ছে HTML ইনপুট element সমূহের সেট, যা HTML controls নামে পরিচিত। যেমন -
• input elements
• select elements
• button elements
• textarea elements
AngularJS ফরম ব্যবহারের উদাহরণ:
formController">
<form novalidate>
First Name:<br>
firstName">
Last Name:<br>
lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = </p>
<p>master = </p>
</div>
<script>
function formController ($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
};
</script>
উদাহরণের AngularJS কোডের এই অংশটুকু রান করলে পরপর দুটি ইনপুট টেক্সবক্স আসবে। একটি বক্সের লেবেল “First Name” এবং অন্যটির “Last Name”। “First Name” টেক্সবক্সের ডিফল্ট value হিসেবে থাকবে “John” এবং “Last Name” টেক্সবক্সে ডিফল্ট value হিসেবে থাকবে Doe.
এর নিচে আরেক প্যারাতে থাকবে: form = {"firstName":"John","lastName":"Doe"}
firstName লেবেলযুক্ত ইনপুট বক্সে যা-ই লেখা হবে সাথে সাথে তা firstName এর পর synchronize হবে।
lastName লেবেলযুক্ত ইনপুট বক্সে যা-ই লেখা হবে সাথে সাথে তা lastName এর পর synchronize হবে।
এর নিচে আরেক প্যারাতে লেখা থাকবে: master = {"firstName":"John","lastName":"Doe"} অর্থাত এটাই ডিফল্ট ভ্যালু। Reset বাটনে ক্লিক করলে এই ভ্যালুতে ফিরে যাবে।
* উপরের উদাহরণে ব্যবহার করা novalidate attribute টি HTML5 এ নতুন সংযোজন. এটি default browser validation অকার্যকর করার জন্য ব্যবহার করা হয়।
উদাহরণটির বিশ্লেষণ:
ng-app directive এখানে AngularJS অ্যাপ্লিকেশন define করেছে।
ng-controller directive এখানে application controller define করেছে।
ng-model directive এখানে input element যুক্ত করেছে।
formController() ফাংশন master object এ প্রাথমিক ভ্যালূ যুক্ত করেছে এবং reset() method আহ্বান করেছে।
reset() method পরিবর্তন করা কোনো ডাটাকে master object এর প্রাথমিক ডাটায় ফিরিয়ে নেয়।
ng-click directive এখানে reset() method কে ঠিক তখনই আহ্বান করবে কেবল যখন এটিতে ক্লিক করা হবে।
