Slide 1

Slide 1 text

Form of Art Angular 2 Forms Shmuela Jacobs painting: Hava Jacobs

Slide 2

Slide 2 text

Angular 2 Forms new version with new API template-driven model-driven (reactive) (thanks Kara Erickson!) API changes: https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

Slide 3

Slide 3 text

using the new forms module npm i @angular/forms bootstrap(AppComponent, [
 disableDeprecatedForms(),
 provideForms() ]); const barrels: string[] = [
 // Angular specific barrels.
 '@angular/core',
 '@angular/common',
 '@angular/forms', Angular CLI: system-config.js

Slide 4

Slide 4 text

Template Driven

Slide 5

Slide 5 text

component class import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'sj-demo-template-form',
 templateUrl: 'demo-template-form.component.html',
 styleUrls: ['demo-template-form.component.css']
 })
 export class DemoTemplateFormComponent {
 
 model = {
 userEmail: '[email protected]'
 };
 
 submitForm(formController) {
 this.model = formController.value;
 }
 
 emailHasError(emailControl) {
 return emailControl && emailControl.touched && !emailControl.valid;
 }
 }

Slide 6

Slide 6 text


 email: 
 
 email is not valid

 Submit
 component template

Slide 7

Slide 7 text

ngForm 
 
 email is not valid
 
 Submit


Slide 8

Slide 8 text

using ngForm 
 
 email is not valid
 
 Submit
 submitForm(formController) {
 this.model = formController.value;
 }

Slide 9

Slide 9 text

ngModel 
 
 email is not valid
 
 Submit
 model = {
 userEmail: '[email protected]'
 };

Slide 10

Slide 10 text

validation 
 
 email is not valid
 
 Submit
 emailHasError(emailControl) {
 return emailControl && emailControl.touched && !emailControl.valid;
 }

Slide 11

Slide 11 text

error message 
 
 email is not valid
 
 Submit
 emailHasError(emailControl) {
 return emailControl && emailControl.touched && !emailControl.valid;
 }

Slide 12

Slide 12 text

form css classes 
 
 email is not valid
 
 Submit
 input.ng-invalid.ng-touched {
 border-color: red;
 }

Slide 13

Slide 13 text

form css classes ng-valid ng-invalid ng-untouched ng-touched ng-pristine ng-dirty

Slide 14

Slide 14 text

NgForm 
 
 email is not valid
 
 Submit
 NgForm dirty pristine touched untouched submitted valid

Slide 15

Slide 15 text

NgForm 
 
 email is not valid
 
 Submit
 NgForm value: { userEmail: ... }

Slide 16

Slide 16 text

FormGroup 
 
 email is not valid
 
 Submit
 NgForm form control FormGroup pending: boolean status: 'VALID' / 'INVALID' / 'PENDING'

Slide 17

Slide 17 text

FormControl 
 
 email is not valid
 
 Submit
 NgForm controls: { userEmail } FormControl value: '[email protected]' status pending valid touched untouched dirty pristine

Slide 18

Slide 18 text


 
 email is not valid
 
 Submit
 FormControl NgForm controls: { userEmail } FormControl errors: { pattern: { actualValue: 's' requiredPattern: '^.+@.+$' }, minlength: actualLength: 2 requiredLength: 3 } }

Slide 19

Slide 19 text

Form Groups 
 
 email is not valid
 
 Submit


Slide 20

Slide 20 text

Form Groups

 

details are not valid

 Submit


Slide 21

Slide 21 text

Form Groups

 

details are not valid

 Submit
 NgForm value: { userDetails: { userName: '', userEmail: '' } }, controls: { userDetails } FormGroup controls: { userName, userEmail } FormControl

Slide 22

Slide 22 text

NgModelGroup

 

details are not valid

 Submit
 NgModelGroup value: { userName: '', userEmail: '' }, name: 'userDetails' control FormGroup controls: { userName, userEmail } FormControl

Slide 23

Slide 23 text

Model-Driven

Slide 24

Slide 24 text

model-driven (reactive) form import { Component } from '@angular/core'; import { REACTIVE_FORM_DIRECTIVES, FormGroup, FormControl } from '@angular/forms'; 
 @Component({ ... ,
 directives: [REACTIVE_FORM_DIRECTIVES] })
 export class DemoTemplateFormComponent {
 
 userNameControl = new FormControl(); userEmailControl = new FormControl(); userDetailsGroup = new FormGroup({
 userName: this.userNameControl, userEmail: this.userEmailControl
 }); 
 userForm = new FormGroup({
 userDetails: this.userDetailsGroup
 }); 
 submitForm() { ... } }

Slide 25

Slide 25 text

model-driven (reactive) form import { Component } from '@angular/core'; import { REACTIVE_FORM_DIRECTIVES, FormGroup, FormControl } from '@angular/forms'; 
 @Component({ ... ,
 directives: [REACTIVE_FORM_DIRECTIVES] })
 export class DemoTemplateFormComponent {
 
 userNameControl = new FormControl(); userEmailControl = new FormControl(); userDetailsGroup = new FormGroup({
 userName: this.userNameControl, userEmail: this.userEmailControl
 }); 
 userForm = new FormGroup({
 userDetails: this.userDetailsGroup
 }); 
 submitForm() { ... } }

Slide 26

Slide 26 text

model-driven (reactive) form 
 


 
 


 

email is not valid


 
 Submit
 
 


Slide 27

Slide 27 text

model-driven (reactive) form userNameControl = new FormControl(); userEmailControl = new FormControl(); userDetailsGroup = new FormGroup({
 userName: this.userNameControl, userEmail: this.userEmailControl
 }); userForm = new FormGroup({
 userDetails: this.userDetailsGroup
 }); 
 


 
 


Slide 28

Slide 28 text

model-driven (reactive) form userNameControl = new FormControl(); userEmailControl = new FormControl(); userDetailsGroup = new FormGroup({
 userName: this.userNameControl, userEmail: this.userEmailControl
 }); userForm = new FormGroup({
 userDetails: this.userDetailsGroup
 }); 
 


 
 


Slide 29

Slide 29 text

initial value import { Component } from '@angular/core'; import { REACTIVE_FORM_DIRECTIVES, FormGroup, FormControl } from '@angular/forms'; 
 @Component({ ... ,
 directives: [REACTIVE_FORM_DIRECTIVES] })
 export class DemoTemplateFormComponent {
 
 userNameControl = new FormControl(); userEmailControl = new FormControl( '[email protected]' ); userDetailsGroup = new FormGroup({
 userName: this.userNameControl, userEmail: this.userEmailControl
 }); 
 userForm = new FormGroup({
 userDetails: this.userDetailsGroup
 });

Slide 30

Slide 30 text

validation import { Component } from '@angular/core'; import { REACTIVE_FORM_DIRECTIVES, FormGroup, FormControl } from '@angular/forms'; 
 @Component({ ... ,
 directives: [REACTIVE_FORM_DIRECTIVES] })
 export class DemoTemplateFormComponent {
 
 userNameControl = new FormControl(); userEmailControl = new FormControl( '[email protected]', Validators.required ); userDetailsGroup = new FormGroup({
 userName: this.userNameControl, userEmail: this.userEmailControl
 }); 
 userForm = new FormGroup({
 userDetails: this.userDetailsGroup
 });

Slide 31

Slide 31 text

validation import { Component } from '@angular/core'; import { REACTIVE_FORM_DIRECTIVES, FormGroup, FormControl } from '@angular/forms'; 
 @Component({ ... ,
 directives: [REACTIVE_FORM_DIRECTIVES] })
 export class DemoTemplateFormComponent {
 
 userNameControl = new FormControl(); userEmailControl = new FormControl( '[email protected]', [Validators.required, Validators.pattern('.+@.+')] ); userDetailsGroup = new FormGroup({
 userName: this.userNameControl, userEmail: this.userEmailControl
 }); 
 userForm = new FormGroup({
 userDetails: this.userDetailsGroup
 });

Slide 32

Slide 32 text

Summary

Slide 33

Slide 33 text

Questions? Thank You!

Slide 34

Slide 34 text

Shmuela Jacobs [email protected] linkedin.com/in/shmuelaj github.com/shmool @ShmuelaJ