با سلام در قسمت پنجم از آموزش‌های انگولار جی اس به بررسی چگونگی ایجاد دستورالعمل ng-model در AngularJS می‌پردازیم.
پیشنهاد می‌شود پیش از ورود به این قسمت تمامی قسمت‌های قبل انگولار جی اس را مطالعه فرمایید برای ورود به لیست تمامی قسمت‌ها روی کلمه‌ی AngularJS کلیک کنید.

دستورالعمل ng-model در انگولار

دستورالعمل ng-model مقادیر کنترل‌کننده در HTML مانند (ورودی (input)، انتخاب (select)، ناحیه‌ی متنی (textarea)) را به داده‌های برنامه‌ی آنگولار متصل می‌کند.
به‌وسیله‌ی دستورالعمل ng-model شما می‌توانید مقدار یک فیلد ورودی را به یک متغیر ایجادشده در Angular JS متصل کنید.
به مثال زیر دراین‌باره توجه فرمایید:

نام: 


از دستورالعمل ng-model استفاده کنید تا مقدار فیلد ورودی را به مالکیت ساخته شده در کنترل وارد کنید.

اتصال دو طرفه

این نوع اتصال هم‌مقدار واردشده در فیلد را عوض کرده و هم‌مقدار ورودی برنامه را عوض می‌کند.
به مثال زیر دراین‌باره توجه فرمایید:

نام: 
نام وارد شده : {{name}}


اگر شما نام داخل فیلد را عوض کنید مشاهده میکنید که نام ورودی عوض خواهد شد

ورودی کاربر را تأیید کنید!

دستورالعمل ng-model می‌تواند اعتبار نوع داده‌های برنامه (شماره، ایمیل، موردنیاز) را فراهم کند:
به مثال زیر دراین‌باره توجه فرمایید:

    ایمیل:
    
    متاسفانه ایمیل شما مورد تایید نیست!

اگر شما ایمیلی در فیلد متنی وارد کنید و نامعتبر باشد مقداری جلوی ان ظاهر خواهد شد که نمایش میدهد ایمیل شما معتبر نیست.

در مثال بالا، محتویات تگ span تنها زمانی نمایش داده می‌شود که بیان در ویژگی ng-show مقدار true را گرفته باشد.

وضعیت برنامه

دستورالعمل مدل ng می‌تواند وضعیت داده‌های برنامه (معتبر، کثیف، لمس، خطا) را فراهم کند:

اینیل:

مقدار ایمیل را عوض کنید تا وضعیت جدید را ببینید.
وضعیت
معتبر: {{myForm.myAddress.$valid}} (اگر مقدار true بود ارزش با تمام معیارها مطابقت دارد).
کثیف: {{myForm.myAddress.$dirty}} (اگر مقدار true بود یعنی متغییر عوض شده).
لمس شده: {{myForm.myAddress.$touched}} (اگر مقدار true بود زمینه تمرکز شده است).

کلاس های css

دستورالعمل ng-model برای کلاس‌های css برای عناصر HTML، بسته به وضعیت آنها فراهم می‌شود:

    نام خود را وارد کنید:
    

اگر شما مقدار فیلد متنی را تغییر دهید بسته به وضعیت مقداری گرفته یا است میدهد.
به یاد داشته باشید : یک فیلد متنی با ویژگی "required" معتبر نیست زمانی که خالی است.

همچنین علاوه بر مثال بالا در صورت نیاز می‌توانید هریک از موارد زیر را به کلاس‌های خود اضافه کنید:

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

برای مشاهده‌ی مطالب بیشتر می‌توانید به سایت w3schools مراجعه فرمایید.

شما با موفقیت به انتهای قسمت پنجم این آموزش رسیدید!

در صورت سؤال داشتن می‌توانید از طریق کامنت ها با ما در تماس باشید!