Angular 2 Forms Cheat Sheet

by Nathan (Nathane2005) via [Link]/28056/cs/8477/

Introd​uction Angular 2 Form - Elements (cont) Displaying Validator Failures

A form creates a cohesive, effective, and FormArray Tracks the value and validity <label for="name">Name</label>
compelling data entry experi​ence. An state of an array of FormCo​‐ ​ ​ ​ ​ ​ ​ ​ ​<input type="t​‐
Angular form coordi​nates a set of data- ntrol instances. A FormArray ext​" class=​"​for​m-c​ont​‐
bound user controls, tracks changes, aggregates the values of each rol​" id="​nam​e"
validates input, and presents errors. child FormCo​ntrol into an ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​‐
array req​uired
Form FormBu​‐ Creates an Abstra​ctC​ontrol ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​‐
<form> ilder from a user-s​pec​ified config​‐ [(n​gMo​del​)]=​"​mod​el.n​am​e"
​ .... tags that include all ura​tion. It is essent​ially name="n​ame​"
input elements syntactic sugar that shortens ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​‐
</f​orm> the new FormGr​oup(), new
#na​me=​"​ngM​ode​l" >
FormCo​ntr​ol(), and new
All forms are placed within the HTML form ​ ​ ​ ​ ​ ​ ​ ​<div [hidde​‐
FormAr​ray() boiler​plate that
tags n]=​"​nam​[Link] || name.p​‐
can build up in larger form
ris​tin​e"
Requires use of FormModule
Standard Input Types ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​cla​‐
ss=​"​alert alert-​dan​ger​">
Text Input <input type="t​ext​">
Reactive Form Names
​ ​ ​ ​ ​ ​ ​ ​ ​ Name is
Email Input <input type="e​mai​l">
formGr​‐ Used to reference a group of required
Password <input type="p​ass​wor​d"> oupName elements ​ ​ ​ ​ ​ ​ ​ ​</d​iv>
Input
formCo​‐ Similar to ngModel reference to
Dropdown <se​lec​t> ntr​‐ a name but simpler from a Workflow
Selection <option value=​"​vol​vo">​Vol​‐ olName naming convention perspe​ctive Steps to creating a reactive form:
vo<​/op​tio​n>
formAr​‐ Syncs a nested FormArray to a 1. Create the Domain Model
<option value=​"​saa​b">S​‐
rayName DOM element. 2. Create the Controller with references to
aab​</o​pti​on>
Requires the use of the Reacti​veF​orm​‐ View
<option value=​"​ope​l">O​pel​‐
sModule Module 3. Create the View
</o​pti​on>
4. Add Valida​tions
<option
Handling Submission Event 5. Add Submit Validation Control
value="audi">Audi</option>
6. Add Dynamic Behaviors
</s​ele​ct> <form (ngSubmit)="onSubmit()">
Multi <select multip​le> ...
Model
Selection <option value=​"​vol​vo">​Vol​‐ </f​orm>
export interface {ModelName} {
vo<​/op​tio​n>
​ ​ ​item(? : optional) :
<option value=​"​saa​b">S​‐ Standard Validation
aab​</o​pti​on> string | number | date | boolean
Mandatory Valida​tor​s.r​equired
<option value=​"​ope​l">O​pel​‐ | class | interface ([] :
Minimum Valida​[Link]​nLe​ngt​‐ array);
</o​pti​on>
Length h(size)
<option }
value="audi">Audi</option> Maximum Valida​tor​s.m​axL​eng​th(​‐
</s​ele​ct> Length size) Controller

Checkbox <input type="c​hec​kbo​x"> Pattern Match Valida​tor​s.p​att​ern​("re​‐

gEx​")
Radio <input type="r​adi​o">
Control
Custom Validators
Numeric <input type="n​umb​er">
Input
Date <input type="d​ate​">
Multiline <te​xtarea rows="4​" cols="5​‐
Input 0"><​/te​xta​rea>

Angular 2 Form - Elements

FormGroup A FormGroup aggregates the function {name}(control : let style =
values of each child FormCo​‐ FormControl) : {[s: string] : require('./[Link]');
ntrol into one object, with boolean} { let template = requir​e("./​so​‐
each control name as the key ​ meT​emp​lat​e.h​tml​");
FormCo​‐ Tracks the value and .... function body.... @Compo​nent({
ntrol validation status of an pass return a null ​ ​sty​les​:[s​tyle],
individual form control. It is fail return an object of type ​ ​tem​plate: template
one of the three fundam​ental {key : true} });
building blocks of Angular } export class {Some}Form
forms implements OnInit{
​
​ ​myForm: FormGroup;
​ ​con​str​uct​or(​private fb :
FormBu​ilder) {};
​ ​ngO​nInit() {
​ ​ ​ ​//C​ons​truct the form
data type

​ ​ ​thi​s.m​yForm: this.f​‐
b.g​roup({
​ ​ ​ ​ ​ ​ ​'co​ntr​olName' :
this.f​b.c​ont​rol​(...),
​ ​ ​ ​ ​ ​ ​'co​ntr​olA​rray'
: this.f​b.a​rra​y([...]),
​ ​ ​ ​ ​ ​ ​'co​ntr​olG​roup'
: this.f​b.g​rou​p({})
​ });
​ }

​onS​ubmit() {
​ ​ ​myF​[Link]; //returns
the form values
​

By Nathan (Nathane2005) Published 9th October, 2016. Sponsored by [Link]

Last updated 9th October, 2016. Measure your website readability!
Page 1 of 3. [Link]

[Link]/nathane2005/
 Angular 2 Forms Cheat Sheet
by Nathan (Nathane2005) via [Link]/28056/cs/8477/

Controller (cont)

> ​ ​ ​myModel = <My​Mod​el>​myF​[Link]​‐

lue​;//Cast to object
}
}

Typical additions include:

1. Http Service Submission (delegate

normally injected)
2. Pipes for Display custom​ization
3. Model based Validators

View

<form [formGroup]='myForm'
(ngSubmit)='onSubmit()'>
​ ​<input formCo​ntr​olN​ame​‐
=''>
​ ​<div formGr​oup​Nam​e='​'>
​ ​ ​ ​ ​ ​<input formCo​ntr​‐
olN​ame​=''>
​ ​</d​iv>
​ ​<div formAr​ray​Nam​e='​'>
​ ​ ​ ​ ​ ​<input
formControlName='{{index}}'
​ ​ ​ ​ ​ ​ ​ ​*ng​For​='let
item of items; index = index'>
​ ​</d​iv>
</f​orm>

Useful Blocks

-- Get Form Items

JSON.s​tri​ngi​fy(​myF​‐
[Link])

Useful Links

Angular Forms
TypeScript Basic Types
HTML Inputs

By Nathan (Nathane2005) Published 9th October, 2016. Sponsored by [Link]

Last updated 9th October, 2016. Measure your website readability!
Page 2 of 3. [Link]

[Link]/nathane2005/