AngularJS input ইনস্ট্রাকশন

সংজ্ঞা ও ব্যবহার

AngularJS পরিবর্তন <input> এলাকার ডিফল্ট হওয়াকে নিয়ে কাজ করে, কিন্তু শর্ত থাকে যে ng-model প্রতিমা প্রদান করা হয়েছে।

তারা ডাটা বাইন্ডিং প্রদান করে, যার মান এটা অর্থাত তা AngularJS মডেলের একটি অংশ এবং তা AngularJS ফাংশন এবং DOM-এ উল্লেখ এবং অপদান করা যায়。

তারা পরীক্ষা প্রদান করে। উদাহরণ: যেমন required প্রতিমার <input> এলাকা $valid অবস্থা নিম্নলিখিত হবে false。

এছাড়াও, তারা অবস্থা নিয়ন্ত্রণও প্রদান করে। AngularJS সমস্ত ইনপুট এলাকার বর্তমান অবস্থা সংরক্ষণ করে。

ইনপুট ফিল্ডটির নিম্নলিখিত অবস্থা রয়েছে:

• $untouched এই ফিল্ডটি হাতে পড়াছে না
• $touched এই ফিল্ডটি হাতে পড়াছে
• $pristine এই ফিল্ডটি পরিবর্তিত হয়নি
• $dirty এই ফিল্ডটি পরিবর্তিত হয়েছে
• $invalid ফিল্ড কনটেন্ট অবাস্তব
• $valid ফিল্ড কনটেন্ট বাস্তব

প্রত্যেক অবস্থার মান একটি বুল মান হিসাবে প্রতিনিধিত্ব করে, যার মান true বা false。

ইনস্ট্যান্স

ডাটা বাইন্ডিং সহযোগে ইনপুট বাক্স:

<input ng-model="myInput">
<p>ইনপুট বাক্সের মান:</p>
<h1>{{myInput}}</h1>

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

সংকেত

<input ng-model="name">

ব্যবহার করা হয় ng-model প্রতিমার মান ইনপুট এলাকা উল্লেখ করে

CSS শ্রেণী

AngularJS অ্যাপলিকেশনের মধ্যে <input> এই এলাকা কিছু শ্রেণী দেওয়া হয়েছে। এই শ্রেণীগুলি ইনপুট এলাকার অবস্থা অনুযায়ী সাইটেম সেট করার জন্য ব্যবহার করা যায়。

নিম্নলিখিত শ্রেণী যোগ করা হয়েছে:

• ng-untouched এই ফিল্ডটি হাতে পড়াছে না
• ng-touched এই ফিল্ডটি হাতে পড়াছে
• ng-pristine এই ফিল্ডটি পরিবর্তিত হয়নি
• ng-dirty এই ফিল্ডটি পরিবর্তিত হয়েছে
• ng-valid ফিল্ড কনটেন্ট বাস্তব
• ng-invalid ফিল্ড কনটেন্ট অবাস্তব
• ng-valid-key প্রতিটি কীয়ের পরীক্ষা করতে হয়ng-valid-requiredযদি একাধিক পরীক্ষা করতেই হয়
• ng-invalid-key উদাহরণ:ng-invalid-required

যদি ক্লাসের মান হয় falseএকই সময়ের মধ্যে একাধিক পরীক্ষা করতেই এটা অত্যন্ত উপযোগী

ইনস্ট্যান্স

স্ট্যান্ডার্ড CSS ব্যবহার করে বাস্তব ও অবাস্তব ইনপুট ইলিমেন্টগুলিতে শৈলী আপনীকরণ করুন:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>

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