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