AngularJS ورودی آئیڈیو

تعلیم

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 کی قیمتیں کے ذریعے ورودی عنصر کو حوالہ دیتی ہیں۔

کلاسوں

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>

آزمایش کنید