دستور input 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 ارزش‌های این ویژگی برای اشاره به ورودی استفاده می‌شوند.

کلاس‌های 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>

به طور شخصی امتحان کنید