در این مقاله قصد داریم کار با فرم ها در انگولار 7 را به شما آموزش دهیم. در این مثال من از فرم های Reactive استفاده می کنم. فرم های Reactive از یک روش مشخص و ثابتی برای مدیریت وضعیت فرم در هر نقطه از زمان استفاده می کند. هر تغییری که در وضعیت فرم اتفاق بیفتد، باعث بوجود آمدن وضعیت جدیدی می شود که اینکار یکپارچگی یک مدل را بین این تغییرات حفظ خواهد کرد.
فرم های Reactive یک مسیر سر راستی را برای انجام تست ارائه می دهد، چون شما اطمینان دارید هنگامی که یک درخواست به وجود می آید، داده های تان ثابت و قابل پیش بینی خواهد بود.
سرفصل های این آموزش
- نصب انگولار 7 توسط Angular Cli
- نصب بوت استرپ 4 در انگولار
- ثبت ماژول Reactive Form
- افزودن کلاس FormControl
- ثبت کنترل در قالب(template)
- کنترل مقادیر فرم
- بروزرسانی مقادیر کنترل فرم
1- نصب انگولار 7 توسط Angular Cli
دستور زیر را برای نصب انگولار 7 در ترمینال وارد کنید.
حال به فولدر ngForms رفته و آن را در ویرایشگر Visual Studio Code باز کنید.
نصب بوت استرپ 4 در انگولار 7
برای نصب بوت استرپ 4 در انگولار، از دستور زیر استفاده کنید.
حال باید بوت استرپ 4 را به آرایه Styles در فایل angular.json اضافه کنید.
فایل را ذخیره کرده و سرور را با دستور زیر راه اندازی کنید.
همان طور که می بینید برنامه در آدرس localhost:4200 باز می شود.
ثبت ماژول Reactive Form در انگولار 7
برای استفاده از فرم های Reactive باید از ماژول ReactiveFormsModule که در پکیج @angular/forms قرار دارد، استفاده کنیم و آن را به آرایه import در فایل app.module.ts اضافه کنیم.
در زیر این ماژول را به فایل app.module.ts اضافه کردیم.
افزودن کلاس FormControl در انگولار 7
کلاس FormControl یکی از بخش های خیلی مهم در هنگام استفاده از فرم های Reactive است. اگر بخواهیم یک کنترل فرم را ثبت کنیم، باید کلاس FormControl را به داخل کامپوننت مان import کنیم و سپس یک نمونه از form Control برای ذخیره پروپرتی های کلاس ایجاد می کنیم.
حال فایل app.component.ts را مطابق زیر ویرایش کنید.