Angular Forms

Forms

• Working with html forms

Template driven forms

• Form directives
• Form validation
• Form CSS state classes
• One way and bidirectional form data binding
• Custom form validation

Reactive forms

• Form services 
• Form validation
• Form directives
• Custom form validation
• Nested forms 
• Updating form values

Comparison between Template driven and Reactive forms

Template driven forms

• ngForm directive
• ngModel directive
• Form Validation
• required
• Form css state classes

• ng-untouched / ng-touched
• ng-pristine / ng-dirty
• ng-invalid / ng-valid

Template driven forms

Form Validation continue…

• required
• minlength
• maxlength
• email
• pattern

One way and Bidirectional data binding

• ngModelChange
• [(ngModel)]

Write a custom form field validator function

• Create custom validator factory function
• Create custom directive and link factory function
• Register directive as form field validation directive

Reactive forms

FormGroup - tracks the values and validation status for a collection of form controls.

FormControl - tracks the value and validation status of an individual form control.

Form Validation

• required
• email
• minlength

Link form with template

• formGroup directive
• formControlName directive

Custom form validation

• formControl directive
• app password strength validator

Form Builder angular service API

• FormBuilder
• add validation error messages

Creating nested form groups

Updating parts of the data model

• setValue() – to set a new value for an individual control
• patchValue() – to replace values for multiple controls

Creating dynamic forms

• Form Array

Comparison between Template driven and Reactive forms

Template driven forms

• Template-driven forms rely on directives in the template to create and manipulate the underlying object model. 
• They are useful for adding a simple form to an app, such as an email list signup form. 
• They're easy to add to an app, but they don't scale as well as reactive forms. 
• If you have very basic form requirements and logic that can be managed solely in the template, template-driven forms could be a good fit.

Reactive forms

• Reactive forms provide direct, explicit access to the underlying forms object model. 
• Compared to template-driven forms, they are more robust: 
• they're more scalable, reusable, and testable. 
• If forms are a key part of your application, or you're already using reactive patterns for building your application, use reactive forms