آموزش فرم های زاویه ای در عمق (Angular 15)

سرفصل ها و درس ها

معرفی Introduction

• فرم های زاویه ای در عمق - راه اندازی محیط توسعه Angular Forms In Depth - Development Environment Setup

معرفی Introduction

• فرم های زاویه ای در عمق - نمای هلیکوپتر Angular Forms In Depth -Helicopter View

• فرم های زاویه ای در عمق - نمای هلیکوپتر Angular Forms In Depth -Helicopter View

• مهم IMPORTANT

• مهم IMPORTANT

• فرم های زاویه ای در عمق - راه اندازی محیط توسعه Angular Forms In Depth - Development Environment Setup

• مقدمه ای بر Angular Forms - چرا به ماژول Forms نیاز داریم؟ Introduction to Angular Forms - why do we need a Forms module?

• مقدمه ای بر Angular Forms - چرا به ماژول Forms نیاز داریم؟ Introduction to Angular Forms - why do we need a Forms module?

• مقدمه ای بر کنترل های فرم مواد زاویه ای Introduction to Angular Material Form Controls

• مقدمه ای بر کنترل های فرم مواد زاویه ای Introduction to Angular Material Form Controls

فرم های قالب محور در عمق Template Driven Forms In Depth

• مقدمه ای بر قالب های مبتنی بر الگو - دستورالعمل ngForm Introduction to Template Driven Forms - the ngForm Directive

• درک نحوه عملکرد Angular ngModel Directive Understanding how the Angular ngModel Directive Works

• مقدمه ای بر اعتبار سنجی فرم Introduction to Form Validation

• درک کلاس‌های وضعیت CSS Angular Forms - ng-valid ng-dirty ng-touched Understanding Angular Forms CSS State Classes - ng-valid ng-dirty ng-touched

• نحوه نمایش پیام های خطا به شکل زاویه ای How to Display Error Messages in an Angular Form

• نحوه نمایش پیام های خطا به شکل زاویه ای How to Display Error Messages in an Angular Form

• تمام اعتبار سنجی فرم های مبتنی بر الگوی داخلی را بیاموزید Learn All the Built-in Template-Driven Form Validators

• تمام اعتبار سنجی فرم های مبتنی بر الگوی داخلی را بیاموزید Learn All the Built-in Template-Driven Form Validators

• نحوه استفاده از ngSubmit - غیرفعال کردن دکمه ارسال فرم How to use ngSubmit - Disabling the Form Submit button

• ngModel پیشرفته - ngModelChange و به روز رسانی ngModelOptions On Property Advanced ngModel - ngModelChange and the ngModelOptions updateOn Property

• ngModel پیشرفته - ngModelChange و به روز رسانی ngModelOptions On Property Advanced ngModel - ngModelChange and the ngModelOptions updateOn Property

• ngModel پیشرفته - ngModelOptions در جزئیات Advanced ngModel - ngModelOptions In Detail

• ngModel پیشرفته - ngModelOptions در جزئیات Advanced ngModel - ngModelOptions In Detail

• درک ngModel One Way و Bidirectional Data Binding Understanding ngModel One Way and Bidirectional Data Binding

• اعتبار سنجی فیلد سفارشی فرم های مبتنی بر الگو - اعتبارسنجی قدرت رمز عبور Template Driven Forms Custom Field Validator - a Password Strength Validator

• اعتبار سنجی فیلد سفارشی فرم های مبتنی بر الگو - اعتبارسنجی قدرت رمز عبور Template Driven Forms Custom Field Validator - a Password Strength Validator

• نحوه نوشتن یک تابع اعتبارسنجی فیلد فرم سفارشی How to write a Custom Form Field Validator Function

• نحوه نوشتن یک تابع اعتبارسنجی فیلد فرم سفارشی How to write a Custom Form Field Validator Function

• اجرای دستورالعمل اعتبار سنجی فیلد فرم سفارشی Implementing a Custom Form Field Validation Directive

• اجرای دستورالعمل اعتبار سنجی فیلد فرم سفارشی Implementing a Custom Form Field Validation Directive

• پیام های خطای متعدد در هر فیلد فرم - درک مشکل Multiple error messages per form field - Understanding the problem

• The onlyOneError Custom Pipe - طراحی API The onlyOneError Custom Pipe - API Design

• The onlyOneError Custom Pipe - پیاده سازی گام به گام The onlyOneError Custom Pipe - Step-by-Step Implementation

• The onlyOneError Custom Pipe - پیاده سازی گام به گام The onlyOneError Custom Pipe - Step-by-Step Implementation

فرم های قالب محور در عمق Template Driven Forms In Depth

• مقدمه ای بر قالب های مبتنی بر الگو - دستورالعمل ngForm Introduction to Template Driven Forms - the ngForm Directive

• درک نحوه عملکرد Angular ngModel Directive Understanding how the Angular ngModel Directive Works

• مقدمه ای بر اعتبار سنجی فرم Introduction to Form Validation

• درک کلاس‌های وضعیت CSS Angular Forms - ng-valid ng-dirty ng-touched Understanding Angular Forms CSS State Classes - ng-valid ng-dirty ng-touched

• نحوه استفاده از ngSubmit - غیرفعال کردن دکمه ارسال فرم How to use ngSubmit - Disabling the Form Submit button

• درک ngModel One Way و Bidirectional Data Binding Understanding ngModel One Way and Bidirectional Data Binding

• پیام های خطای متعدد در هر فیلد فرم - درک مشکل Multiple error messages per form field - Understanding the problem

• The onlyOneError Custom Pipe - طراحی API The onlyOneError Custom Pipe - API Design

مقدمه ای بر فرم های واکنشی زاویه ای Introduction to Angular Reactive Forms

• مقدمه ای بر فرم های واکنشی زاویه ای Introduction to Angular Reactive Forms

• مقدمه ای بر فرم های واکنشی زاویه ای Introduction to Angular Reactive Forms

• مقدمه ای بر فرم های واکنشی - مثال گام به گام Introduction to Reactive Forms - Step-by-Step Example

• مقدمه ای بر فرم های واکنشی - مثال گام به گام Introduction to Reactive Forms - Step-by-Step Example

• فرم های واکنشی - دستورالعمل کنترل فرم و اعتبار سنجی سفارشی Reactive Forms - The Form Control Directive and Custom Validators

• فرم های واکنشی - دستورالعمل کنترل فرم و اعتبار سنجی سفارشی Reactive Forms - The Form Control Directive and Custom Validators

• API Form Builder - نوشتن فرم های واکنشی بسیار مختصرتر The Form Builder API - Writing much more concise Reactive Forms

• API Form Builder - نوشتن فرم های واکنشی بسیار مختصرتر The Form Builder API - Writing much more concise Reactive Forms

• مقایسه فرم های راکتیو و قالب محور Comparing Reactive and Template Driven Forms

• مقایسه فرم های راکتیو و قالب محور Comparing Reactive and Template Driven Forms

• فرم های تایپ دقیق زاویه ای Angular Strictly Typed Forms

• فرم های تایپ دقیق زاویه ای Angular Strictly Typed Forms

• فرم ساز غیر قابل حذف Non Nullable Form Builder

مقدمه ای بر فرم های واکنشی زاویه ای Introduction to Angular Reactive Forms

• فرم ساز غیر قابل حذف Non Nullable Form Builder

اشکال واکنشی زاویه ای در عمق Angular Reactive Forms In Depth

• بخش جدید - فرم های واکنشی پیشرفته New Section - Advanced Reactive Forms

• بخش جدید - فرم های واکنشی پیشرفته New Section - Advanced Reactive Forms

• ساخت یک فرم واکنشی چند مرحله ای زاویه ای با مواد زاویه ای Building an Angular Multi-Step Reactive Form with Angular Material

• ساخت یک فرم واکنشی چند مرحله ای زاویه ای با مواد زاویه ای Building an Angular Multi-Step Reactive Form with Angular Material

• اعتبار سنجی فرم ناهمزمان زاویه ای Angular Asynchronous Form Validators

• اعتبار سنجی فرم ناهمزمان زاویه ای Angular Asynchronous Form Validators

• کنترل‌های Angular Forms - نحوه اضافه کردن یک فیلد DatePicker به یک فرم واکنش‌گرا Angular Forms Controls - How to add a DatePicker field to a Reactive Form

• کنترل‌های فرم زاویه‌ای - کادر انتخاب و ناحیه متن Angular Form Controls - Checkbox and Text Area

• کنترل‌های فرم زاویه‌ای - کادر انتخاب و ناحیه متن Angular Form Controls - Checkbox and Text Area

• کنترل فرم کشویی انتخاب زاویه ای - نمونه گام به گام Angular Selection Dropdown Form Control - Step-by-Step Example

• کنترل فرم کشویی انتخاب زاویه ای - نمونه گام به گام Angular Selection Dropdown Form Control - Step-by-Step Example

• فرم های چند مرحله ای - نمایش یک پیام خطا در هر مرحله Multi-Step Forms - Displaying an Error Message per Step

• فرم های چند مرحله ای - نمایش یک پیام خطا در هر مرحله Multi-Step Forms - Displaying an Error Message per Step

• فرم های واکنشی - فعال و غیرفعال کردن فیلدهای فرم به صورت پویا Reactive Forms - Dynamically Enabling and Disabling Form Fields

• انتخابگر محدوده تاریخ مواد زاویه ای - مثال گام به گام Angular Material Date Range Selector - Step-by-Step Example

• اعتبار سنجی سفارشی چند میدانی فرم های واکنشی Reactive Forms Multi-field Custom Validation

• نحوه پیاده‌سازی پیش‌نویس فرم از پیش ذخیره با استفاده از ValueChanges Observable API How to implement Form Draft Pre-Save using the valueChanges Observable API

• نحوه پیاده‌سازی پیش‌نویس فرم از پیش ذخیره با استفاده از ValueChanges Observable API How to implement Form Draft Pre-Save using the valueChanges Observable API

اشکال واکنشی زاویه ای در عمق Angular Reactive Forms In Depth

• کنترل‌های Angular Forms - نحوه اضافه کردن یک فیلد DatePicker به یک فرم واکنش‌گرا Angular Forms Controls - How to add a DatePicker field to a Reactive Form

• فرم های واکنشی - فعال و غیرفعال کردن فیلدهای فرم به صورت پویا Reactive Forms - Dynamically Enabling and Disabling Form Fields

• انتخابگر محدوده تاریخ مواد زاویه ای - مثال گام به گام Angular Material Date Range Selector - Step-by-Step Example

• اعتبار سنجی سفارشی چند میدانی فرم های واکنشی Reactive Forms Multi-field Custom Validation

کنترل‌های فرم سفارشی زاویه‌ای Angular Custom Form Controls

• بخش جدید - کنترل‌های فرم سفارشی زاویه‌ای - یک جزء آپلود فایل New Section - Angular Custom Form Controls - a File Upload Component

• کامپوننت آپلود فایل سفارشی - پیاده سازی گام به گام Custom File Upload Component - Step-by-Step Implementation

• آپلود فایل Angular - باز کردن یک گفتگوی آپلود فایل Angular File Upload - Opening a File Upload Dialog

• آپلود فایل Angular - باز کردن یک گفتگوی آپلود فایل Angular File Upload - Opening a File Upload Dialog

• آپلود فایل Angular - آپلود به سرور گره با استفاده از HTTP Client Angular File Upload - Uploading to a Node Server using the HTTP Client

• پیاده سازی نشانگر پیشرفت آپلود فایل Implementing a File Upload Progress Indicator

• درک واسط ControlValueAccessor Forms Angular Understanding the Angular Forms ControlValueAccessor Interface

• درک واسط ControlValueAccessor Forms Angular Understanding the Angular Forms ControlValueAccessor Interface

• رابط ControlValueAccessor - پیاده سازی گام به گام ControlValueAccessor Interface - Step-by-Step Implementation

• رابط ControlValueAccessor - پیاده سازی گام به گام ControlValueAccessor Interface - Step-by-Step Implementation

• ControlValueAccessor - تنظیم DI Configuration و Demo ControlValueAccessor - Setting Up DI Configuration and Demo

• ControlValueAccessor - تنظیم DI Configuration و Demo ControlValueAccessor - Setting Up DI Configuration and Demo

• کنترل‌های فرم سفارشی زاویه‌ای - رابط اعتبارسنجی Angular Custom Form Controls - The Validator Interface

• کنترل‌های فرم سفارشی زاویه‌ای - رابط اعتبارسنجی Angular Custom Form Controls - The Validator Interface

• فرم تودرتو قابل استفاده مجدد چیست؟ What is a Reusable Nested Form?

• فرم تودرتو قابل استفاده مجدد چیست؟ What is a Reusable Nested Form?

• نحوه استفاده از ControlValueAccessor برای پیاده سازی یک فرم تودرتو How to Use ControlValueAccessor to implement a Nested Form

کنترل‌های فرم سفارشی زاویه‌ای Angular Custom Form Controls

• بخش جدید - کنترل‌های فرم سفارشی زاویه‌ای - یک جزء آپلود فایل New Section - Angular Custom Form Controls - a File Upload Component

• کامپوننت آپلود فایل سفارشی - پیاده سازی گام به گام Custom File Upload Component - Step-by-Step Implementation

• آپلود فایل Angular - آپلود به سرور گره با استفاده از HTTP Client Angular File Upload - Uploading to a Node Server using the HTTP Client

• پیاده سازی نشانگر پیشرفت آپلود فایل Implementing a File Upload Progress Indicator

• نحوه استفاده از ControlValueAccessor برای پیاده سازی یک فرم تودرتو How to Use ControlValueAccessor to implement a Nested Form

آرایه ها را در عمق تشکیل دهید Form Arrays In Depth

• بخش جدید - راه اندازی مرحله 3 فرم چند مرحله ای ما New Section - Setting Up Step 3 of our Multi-step Form

• بخش جدید - راه اندازی مرحله 3 فرم چند مرحله ای ما New Section - Setting Up Step 3 of our Multi-step Form

• آماده سازی مرحله 3 فرم چند مرحله ای ما Preparing Step 3 of our Multi-Step Form

• آرایه های فرم زاویه ای - مثال گام به گام Angular Form Arrays - Step-by-Step Example

• آرایه های فرم زاویه ای - مثال گام به گام Angular Form Arrays - Step-by-Step Example

• فرم چند مرحله ای زاویه ای - نسخه نمایشی نهایی Angular Multi-Step Form - Final Demo

آرایه ها را در عمق تشکیل دهید Form Arrays In Depth

• آماده سازی مرحله 3 فرم چند مرحله ای ما Preparing Step 3 of our Multi-Step Form

• فرم چند مرحله ای زاویه ای - نسخه نمایشی نهایی Angular Multi-Step Form - Final Demo

نتیجه Conclusion

• سخنرانی پاداش Bonus Lecture

• سخنرانی پاداش Bonus Lecture

• فرم های زاویه ای در عمق - نتیجه گیری و نکات کلیدی Angular Forms In Depth - Conclusions & Key Takeaways

نتیجه Conclusion

• فرم های زاویه ای در عمق - نتیجه گیری و نکات کلیدی Angular Forms In Depth - Conclusions & Key Takeaways