Angular Forms in Angular

Angular Forms is the third chapter of the free Angular tutorial. Almost every business application collects data through forms, such as sign-up pages, checkout pages and settings screens.

What each lesson covers:

• Template-Driven Forms: FormsModule and ngModel, every common input type from text fields to checkboxes and dates, handling input, tracking form state, submitting and resetting forms.
• Reactive Forms: Defining forms in the class with FormControl, FormGroup, FormBuilder and FormArray, and updating values with setValue() and patchValue().
• Form Validation: Built-in validators, control states such as touched and dirty, clear error messages, custom, cross-field, real-time and conditional validation.

Every practice block runs real Angular in your browser, in TypeScript or JavaScript. The exercises check what your form displays after you change the code, so any correct answer passes.

Lessons in this section

1. Template-Driven Forms

   Building forms in the template with FormsModule and ngModel: every common input type, handling input, tracking form state, submitting and resetting, and best practices.

2. Reactive Forms

   Defining forms in the component class with FormControl, FormGroup, FormBuilder and FormArray, setting values with setValue and patchValue, and nesting groups.

3. Form Validation

   Validating input with built-in and custom validators, control states, clear error messages, cross-field, real-time and conditional validation, and best practices.