ذکر کردن کلاس هایی (Class) برای تگ input (یا تگ های دیگر) از فرم (Form)، با دستور دهنده ng-model ، در AngularJS

در کلید شماره 26192 ، کاربرد دستور دهنده ng-model را در چارچوب AngularJS شرح دادیم و نشان دادیم که چگونه با استفاده از دستور دهنده ng-model ، مقدار دریافت شده توسط تگ input (یا تگ های دیگر) از فرم (Form) را در یک متغیر ذخیره نماییم.

اما یک نکته مهم در رابطه با استفاده از دستور دهنده ng-model وجود دارد و نکته مورد نظر این است که این دستور دهنده (Directive) بر اساس وضعیت آن فیلد (Field) از فرم (Form)، کلاس هایی (Class) از پیش تعریف شده را برای آن عنصر (تگ input یا تگ های دیگر از فرم) ذکر می کند. یعنی با توجه به تغییر وضعیت آن فیلد (Field) از فرم (Form) (تگ input یا تگ های دیگر از فرم)، دستور دهنده ng-model ، کلاس هایی (Class) را برای آن تگ (Tag) از فرم (Form) اضافه نموده و یا کلاس هایی (Class) را از آن حذف می کند (حذف کلاس هایی که قبلا برای آن ذکر شده بودند).

کلاس هایی (Class) که دستور دهنده ng-model اقدام به اضافه نمودن و یا حذف کردن آنها می کند، عبارتند از :

بنابراین ما بر اساس این کلاس های (Class) از پیش تعریف شده، که برای حالت های مختلف فیلد فرم (Form Field) می باشند، می توانیم کدهای CSS دلخواه خود را تعریف کنیم، تا بر اساس آن کدهای CSS ، فیلد فرم (Form Field) را در حالت های مختلف، مطابق میل خود طراحی نماییم.

در ادامه، مثالی را ذکر می کنیم و در آن نشان می دهیم که چگونه کدهای CSS را برای یکی از این کلاس ها (Class) تعریف نماییم.

مثال

کد کامل صفحه HTML :

در این صفحه HTML ، یک فرم (Form) ساخته ایم که برای تگ input موجود در آن، دستور دهنده ng-model ذکر شده است :

اما نکته مهم در تگ input این است که مشخصه required را برای آن ذکر کرده ایم که باعث می شود کاربر مجبور باشد که حتما مقداری را در آن فیلد (Field) ساخته شده توسط تگ input وارد کند، در غیر این صورت، نمی تواند فرم (Form) را Submit کند. بنابراین در ابتدای نمایش صفحه، چون هیچ مقداری در این فیلد (Field) وارد نشده است، دستور دهنده ng-model باعث می شود که کلاس ng-invalid برای تگ input مورد نظر ذکر گردد (که یعنی مقدار آن فیلد (Field) از فرم (Form)، صحیح نمی باشد، چون اصلا مقداری برای آن وارد نشده، در صورتیکه حتما باید یک مقدار برای آن وارد شود)، همچنین به محض اینکه کاربر یک مقدار را در فیلد (Field) مربوط به آن تگ input وارد کند، کلاس ng-invalid برای آن تگ input حذف می شود.

ما فقط بر اساس وضعیت ورودی آن تگ input ، می دانیم که کلاس ng-invalid به آن اضافه شده و یا اینکه حذف می شود، اما هنوز هیچ ویژگی برای عنصر دارای کلاس ng-invalid تعریف نکرده ایم، بنابراین یک سری کدهای CSS را هم در صفحه ذکر می کنیم که باعث می شود هر تگ input که کلاس ng-invalid برای آن ذکر شده است، دارای پس زمینه به رنگ ((سبز روشن)) (lightgreen) باشد (رنگ پس زمینه کادر مربوط به تگ input) :

بنابراین هر زمان که هیچ مقداری در کادر ساخته شده توسط تگ input وارد نشده باشد، کلاس ng-invalid برای آن ذکر شده است و بنابراین کادر آن دارای رنگ پس زمینه ((سبز روشن)) خواهد بود و هر زمان که کاربر یک مقدار را در کادر مربوط به تگ input وارد کند، کلاس ng-invalid از آن تگ input حذف می شود و بنابراین رنگ پس زمینه آن به همان صورت پیش فرض خواهد بود.