آموزش کار با فرم ها در انگولار ۷

0 1,337

 در این مقاله قصد داریم کار با فرم ها در انگولار 7 را به شما آموزش دهیم. در این مثال من از فرم های Reactive استفاده می کنم. فرم های Reactive از یک روش مشخص و ثابتی برای مدیریت وضعیت فرم در هر نقطه از زمان استفاده می کند. هر تغییری که در وضعیت فرم اتفاق بیفتد، باعث بوجود آمدن وضعیت جدیدی می شود که اینکار یکپارچگی یک مدل را بین این تغییرات حفظ خواهد کرد.

فرم های Reactive یک مسیر سر راستی را برای انجام تست ارائه می دهد، چون شما اطمینان دارید هنگامی که یک درخواست به وجود می آید، داده های تان ثابت و قابل پیش بینی خواهد بود.

سرفصل های این آموزش

  1. نصب انگولار 7 توسط Angular Cli
  2.  نصب بوت استرپ 4 در انگولار
  3. ثبت ماژول Reactive Form
  4. افزودن کلاس FormControl
  5. ثبت کنترل در قالب(template)
  6. کنترل مقادیر فرم
  7. بروزرسانی مقادیر کنترل فرم

1- نصب انگولار 7 توسط Angular Cli

دستور زیر را برای نصب انگولار 7 در ترمینال وارد کنید.

نصب انگولار 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 را مطابق زیر ویرایش کنید.

با استفاده از سازنده FormControl یک مقدار اولیه به email می دهیم که شامل یک رشته خالی است.

با ایجاد این فرم کنترل در کلاس کامپوننت تان، می توانید بصورت بلادرنگ به وضعیت های listen، update و Validate فیلدهای input فرم دسترسی داشته باشید، که در این مثال ما با فیلد email کار خواهیم کرد.

ثبت کنترل در قالب HTML انگولار 7

بعد از این که یک کنترل در کلاس کامپوننت تان ایجاد کردید، باید آن را به عنصرهای control فرم در قالب، نسبت بدهید.

این قالب را با یک کنترل فرم با استفاده از اتصال formControl ارائه شده توسط formControlDirective که در ماژول ReactiveFormsModule قرار دارد، بروزرسانی می کنیم.

با استفاده از یک سینتکس اتصال قالب (template binding) فرم کنترل (FormControl) هم اکنون به یک فیلد input مربوط به email در یک قالب، ثبت شده است.

یک فرم کنترل و عنصر Dom با هم ارتباطی شبیه به آنچه که یک View تغییرات را در یک مدل بازتاب می دهد، دارند و مدل، تغییرات را در View نمایش می دهند. به این ویژگی اتصال دو طرفه داده ها یا Two-Way Data Binding می گویند.

توجه: اگر چنانچه با مفاهیم فریم ورک انگولار آشنایی ندارید، دوره آموزش صفر تا صد انگولار می تواند به شما کمک کند که در قالب یک پروژه به این فریم ورک قدرتمند مسلط شوید:

دسترسی و کنترل مقدار فرم در انگولار 7

شما می توانید مقادیر را با روش های زیر نمایش دهید.

1- از طریق observable valueChange، شما می توانید تغییرات مقدار یک فرم در قالب را توسط AsyncPipe و یا در کلاس کامپوننت توسط متد subscribe() زیر نظر بگیرید.

2- با استفاده از پروپرتی value می توانید به مقدار جاری یک فیلد دسترسی داشته باشید.

 

کنترل مقدار یک فرم

بروزرسانی مقادیر فرم کنترل در انگولار 7

فرم های Reactive متدهایی برای تغییر مقدار کنترل ها دارند، که به ما این امکان را می دهند تا بدون تعامل با کاربر، مقادیر فرم را بروزرسانی کنیم. یک نمونه از فرم کنترل ایجاد شده، متدی با نام setValue() دارد که مقدار فرم کنترل را بروزرسانی کرده و ساختار یک مقدار را اعتبارسنجی می کند.

کدهای زیر را در فایل app.component.ts قرار دهید.

همچنین باید فایل app.component.html را بروزرسانی کنیم.

حال در صورت تایپ مقدار ایمیل در textbox، مقدار آن در صفحه در قسمت مشخص شده نمایش داده می شود.

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle