Handling Angular Forms
Without
Losing Your Sanity

Jennifer Wadella

Jennifer Wadella

@likeOMGitsFEDAY

• Lead Angular Developer at Bitovi
• Community Organizer
• Kombucha brewin' crazy plant lady

Dealing with Angular Forms

How Would Loora Wang
Code Reactive Forms?

Start with the basics.

Template Driven Forms

• Use "FormsModule"
• Uses ngModel to bind to inputs
• Logic in Template syntax
• Asynchronous

Handling Complex Situations with Template Driven Forms

Reactive Forms

• Use "ReactiveFormsModule"
• Uses "formControl" directive to bind to inputs
• Logic in Controller(reactively programmed)
• Synchronous

Reactive Forms Building Blocks

• FormControl: basic form building block to create an input/radio/select/etc. Tracks the value and validation status.
• FormGroup: a group of form controls.
• FormArry: an array of form controls.
• FormControl & FormControlName: directives that tie form elements to a formControl.
• FormBuilder:Shorthand syntax for building reactive forms

Form Control

The basic element of building Angular forms is the FormControl. This is a class that represents that input element on a page with a name value you’re likely used to seeing.

Any piece of information we want to collect in a form, whether it’s an input, select, dropdown, or custom element needs to have a representative FormControl. The `[formControl]` directive is used to bind the input element in the DOM to it’s respective FormControl.

Form Group

FormGroup is the class that allows us to group a number of controls together. It also extends the AbstractControl class, meaning we can track the validity and value of all the FormControls in a FormGroup together.

This allows us to easily manage our form as a whole. The `[formGroup]` directive binds the FormGroup to a DOM element.

Form Array

FormArray is a class that aggregates FormControls into an array, similar to FormGroup creating an object from FormControls.

FormArrays can have controls pushed to them or removed from them similar to the way you’d manipulate an array in vanilla JS, and offer us a lot of power and flexibility when creating nested and dynamic forms.

Form Builder

Repeatedly typing new FormControl(''), new FormGroup({}), and new FormArray([]) can become a bit tedious, especially when creating larger forms.

Angular has shorthand syntax we can use thanks to the FormBuilder class.

Harnessing Reactive Forms Knowledge

Complicated Problems

1. I need dynamic required fields & custom validation rules
2. I need to dynamically create and remove
   form controls & form groups
3. I need to display one thing in an input field
   for the user but submit something else

I need dynamic required fields & custom validation rules

I want the subcategories control to be required to contain at least 2 items

Validation 3 ways:

I need to dynamically create and remove form controls & form groups

Form Array Methods:

• An insert method that takes two parameters, the index at which to insert, and the control to insert.
• A removeAt method, which takes the index of the control to remove.

I need to display one thing in an input field for the user but submit something else

Use the Control Value Accessor Interface

Create a component that will act as a form control and "emit" the value we want

Concepts Learned

• Reactive Forms building blocks
• Subscribing to form value changes
• Using different validators
• Iterating through controls
• Adding and removing to and from FormArrays
• Utilizing the Control Value Accessor Interface
• And most importantly ...

Embrace your inner Loora

Questions?

Come talk to me during the break!

Slides available at: tehfedaykin.github.io/HandlingAngularForms

More about forms: bitovi.com/blog