অ্যাঙ্গুলারজেএস মডেল ডিরেক্টিভ - AngularJS ng-model Directive
ng-model ডিরেক্টিভ(directive) এইচটিএমএল কন্ট্রোল(control) যেমন-input, select এবং textarea ইত্যাদি এর ভ্যালু(value) এবং এপ্লিকেশন ডাটার মধ্যে বন্ধন তৈরি করে।
ng-model ডিরেক্টিভ(directive)
ng-modelডিরেক্টিভ(directive) AngularJS এ সৃষ্ট ভ্যারিয়েবল এবং ইনপুট ফিল্ডের ভ্যালু(value) এর মধ্যে বন্ধন সৃষ্টি করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
নামঃ <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Tamim Iqbal";
});
</script>
</body>
</html>
ফলাফল
দুইভাবে বন্ধন(Two-Way Binding)
AngularJS এ বন্ধন দুইভাবে হতে পারে। যদি ইনপুট ফিল্ডের ভ্যালু(value) পরিবর্তন হয়, তাহলে AngularJS এর প্রোপার্টি/ভ্যারিয়েবলের ভ্যালুও(value) পরিবর্তন হয়।
অর্থাৎ মডেল(Model) পরিবর্তন হলে ভিউ(View) পরিবর্তন হয় এবং ভিউ(View) পরিবর্তন হলে মডেলও(Model) পরিবর্তন হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<p> AngularJS এর প্রয়োগ দেখার জন্য নিচের বক্সে কিছু লিখুনঃ </p>
<div ng-app="myApp" ng-controller="myCtrl">
নামঃ <input ng-model="name">
<h3>আপনি লিখেছেনঃ {{name}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Tamim Iqbal";
});
</script>
</body>
</html>
ফলাফল
ইউজার ইনপুট ভ্যালিডেশন(Validate User Input)
ng-model ডিরেক্টিভ(directive) এপ্লিকেশন ডাটা যেমন-number, e-mail এবং required ইত্যাদির জন্য টাইপ ভ্যালিডেশনও সরবরাহ করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<form ng-app="" name="myForm">
ই-মেইলঃ
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">বৈধ ই-মেইল এড্রেস না।</span>
</form>
</body>
</html>
ফলাফল
উপরের উদাহরণে যদি ng-show এট্রিবিউট true রিটার্ন করে, তাহলে < span > এলিমেন্ট এর কন্টেন্ট প্রদর্শিত হবে।
ng-model এট্রিবিউটে কোনো প্রোপার্টি বিদ্যমান না থাকলে AngularJS নিজে থেকেই একটি তৈরি করে নিবে।
এপ্লিকেশন স্ট্যাটাস(Application Status)
ng-model ডিরেক্টিভ(directive) এপ্লিকেশন ডাটার জন্য বিভিন্ন স্ট্যাটাস যেমন-invalid, dirty, touched, error ইত্যাদি সরবরাহ করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<form ng-app="" name="myForm" ng-init="myText = 'sattacademy@gmail.com'">
ই-মেইলঃ
<input type="email" name="myAddress" ng-model="myText" required>
<p>স্ট্যাটাস পরিবর্তন করার জন্য ই-মেইল Edit করুন।</p>
<h1>স্ট্যাটাস</h1>
<p>Valid: {{myForm.myAddress.$valid}} (ভ্যালু সঠিক হলে true রিটার্ন করবে)</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (ভ্যালু পরিবর্তন হলে true রিটার্ন করবে)</p>
<p>Touched: {{myForm.myAddress.$touched}} (ইনপুট ফিল্ড ফোকাস হলে true রিটার্ন করবে)</p>
</form>
</body>
</html>
ফলাফল
সিএসএস ক্লাস(CSS Class)
এইচটিএমএল এলিমেন্টের স্ট্যাটাস এর উপর ভিত্তি করে ng-model ডিরেক্টিভ(directive) সিএসএস ক্লাস সরবরাহ করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
<style>
input.ng-invalid {
background-color: grey;
}
</style>
</head>
<body>
<form ng-app="" name="myForm">
নাম লিখুনঃ
<input name="myName" ng-model="myText" required>
</form>
</body>
</html>
ফলাফল
তথ্যঃ "required" এট্রিবিউটসহ একটি টেক্সত ফিল্ড খালি থাকলে তা বৈধ নয়।
ফর্ম ফিল্ডের স্ট্যাটাসের উপর ভিত্তি করে ng-model ডিরেক্টিভ(directive) নিম্নোক্ত সিএসএস ক্লাসসমূহ সংযোজন/বিয়োজন করেঃ
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine