دستور فرم AngularJS

دستورالعمل‌های مرجع AngularJS

تعریف و استفاده

تغییرات AngularJS <form> رفتار پیش‌فرض عناصر.

فرم‌های برنامه AngularJS دارای برخی از ویژگی‌ها هستند. این ویژگی‌ها وضعیت فعلی فرم را توصیف می‌کنند.

فرم دارای حالت‌های زیر است:

  • $pristine هیچ یک از فیلدها تغییر نکرده است
  • $dirty یک یا چند فیلد تغییر کرده است
  • $invalid محتوای فرم نامعتبر است
  • $valid محتوای فرم معتبر است
  • $subscribed فرم ارسال شده

مقدار هر یک از حالت‌ها یک مقدار بولین است که نشان‌دهنده true یا false.

اگر attribute action تعیین نشده باشد، فرم AngularJS از عملکرد پیش‌فرض جلوگیری می‌کند، یعنی فرستادن فرم به سرور.

مثال

مثال 1

تنها زمانی که فیلدهای مورد نیاز خالی هستند، وضعیت "true" فرم "وضعیت معتبر" به حساب نمی‌آید:

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>وضعیت معتبر بودن فرم:</p>
<h1>{{myForm.$valid}}</h1>

آزمایش کنید

مثال 2

این استایل را به فرم‌های تغییرناخودکار (اولیه) و تغییر کرده اعمال می‌کند:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>

آزمایش کنید

نحوه

<form name="formname</form>

با استفاده از name ارزش خاصیت برای اشاره به فرم استفاده می‌شود.

کلاس‌های CSS

فرم‌های درون برنامه AngularJS با برخی از کلاس‌ها تعیین شده‌اند. این کلاس‌ها می‌توانند برای تنظیم استایل فرم بر اساس وضعیت آن استفاده شوند.

کلاس‌های زیر اضافه شده‌اند:

  • ng-pristine هیچ فیلدی تغییر نکرده است
  • ng-dirty یک یا چند فیلد تغییر کرده است
  • ng-valid محتوای فرم معتبر است
  • ng-invalid محتوای فرم نامعتبر است
  • ng-valid-key هر بار یک کلید را تأیید می‌کند. مثال:ng-valid-required، هنگامی که بیش از یک مورد باید تأیید شود بسیار مفید است
  • ng-invalid-key مثال:ng-invalid-required

اگر ارزش کلاس نمایانگر باشد false، در این صورت این کلاس‌ها حذف خواهند شد.

دستورالعمل‌های مرجع AngularJS