Decoded Frontend

Basic Form Validation

Applying Validators For The Rest of Controls

Enable the Native Browser Validation

Showing Validation Messages

Improving Error Messages

Deep Dive into How Validators are resolved & executed

How to Create A Custom Validator

What is Cross-Field Validation

How to dynamically enable or disable validator

Adjusting custom validator to support dynamic validation

Async Validators - Everything You Have to Know

Different strategies to reset the Form

Binding Form Model with the Template in Reactive Forms

Under the Hood of FormGroup and FormControlName Directives

Basic Form Grouping in Reactive Forms

Grouping Controls into an Array

Grouping of Complex Data in FormArray

Submitting the Form

Standalone Controls in the Reactive Forms

Strict Typings in Reactive Forms

Non-Nullable FormControls Explained

Add FormControls dynamically to the existing Form

FormRecord and the difference from FormGroup

Reduce boilerplate using Form Builders

Introducing Control Statuses in Reactive Forms

How Control Status tracking works under the Hood

Applying the basic validation to the Reactive Form

Apply built-in validators to the rest of controls

How to show Error Messages for Form Controls

Improving error messages giving more meaningful information

How to create a Custom Validator in Reactive Forms

Cross-Field Validators in Reactive Forms

How to Add or Remove Validators Dynamically in Reactive Forms

Async Validators in Reactive Forms

How to properly reset Form using ReactiveForms

What is the role of ValueAccessor in Angular Forms?

Overview of the Default Value Accessor Implementation

How the Default Value Accessor is used Internally

Built-In Value Accessors in Angular Forms

Angular Forms with 3rd Party controls and DefaultValueAccessor

Implementing Custom Value Accessor Directive

Implementing custom Rating Picker with corresponding custom Value Accessor

Installing Required Libs and Creating Dedicated Component

Implementing basic layout for Select Component

Implementing Drop-Down Panel

Adding Animations to the Drop-Down Panel

Option Component Pt.1 - Basic implementation

Option Component Pt.2 - Adding "disabled" State

Highlighting the initially selected Option

Implementing Value Selection using Angular CDK's SelectionModel Class.

Fix the Bug when the Select value changes dynamically

Improving Types for Select and Option components

Making Components Work with Dynamic Data and Different Change Detection Strategies

Resolving Display Value when a Complex Data Structure is used

Making Select Component to properly resolve complex Data Structures

Improving the Selection Algorithm

Implementing Multi-Selection Feature

Clear Up Current Selections

Fixing the Issue with Overlay z-index

Implementing Option Searching Feature

Implementing of the DISABLED state for the Select Component

Implementing Control Value Accessor Pt. 1

Implementing Control Value Accessor Pt. 2

Keyboard Navigation: Basic Navigation Through the Select Options

Keyboard Navigation: Select Item by ENTER & Autoscroll to the Active Option

Render the Form From Config

How to resolve and Apply Validators to Dynamic Forms

Improve Typings of Dynamic Validator Keys

Render Error Messages for Dynamic Controls

Improve the Form Architecture with Dynamic Components Pt.1

Improve the Form Architecture with Dynamic Components Pt.2

Improve the Form Architecture with Dynamic Components Pt.3

Extending the Dynamic Form with new Control Types and Validators

Add FormGroup support to the Dynamic Form

Improving HTML Structure for Dynamic Form Controls

Bonus: Lazy Loading of Dynamic Controls

Bonus: Remove formGroup wrapper from Dynamic Control Component templates

Bonus: Customization of the Dynamic Controls Order

Bonus: Making Dynamic Controls Self-Contained (Architecture Improvement)

Extracting Error Messages Into a Separate Component

Making Error Messages More Descriptive and Configurable

Minor Improvements and Refactoring of InputError component

Creating Error Messages Dynamically Pt.1

Creating Error Messages Dynamically Pt.2

Cleaning Up: Remove Unnecessary RxJS Filter

Rendering Error Messages Dynamically when Form Control is Touched/Dirty/or Form is submitted

Implementing a Global and Customizable Strategy on When Error messages Has to Be Shown

Add Support of Dynamic Error Messages for the Form Groups

How to Disable Error Rendering for a Certain Form Control or Group

How Render Error Messages in a Custom View Slot/Container

Before You Go...

Addition 1 - Demystifying the 2-way data-binding in Angular

Addition 2 - Assigning the Directive Instances to Template Variables