Form of Art - Angular 2 forms

Forms are a key ingredient in most, if not all, Web applications. In this session we’ll learn how to construct forms with Angular 2, applying code and UX best practices.
Presented at https://js-il.com/ and http://www.meetup.com/AngularJS-IL/events/231885788/

Transcript

1. Form of Art Angular 2 Forms Shmuela Jacobs painting: Hava Jacobs
2. 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
3. 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
4. Template Driven
5. 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: 'user@example.com'
 };
 
 submitForm(formController) {
 this.model = formController.value;
 }
 
 emailHasError(emailControl) {
 return emailControl && emailControl.touched && !emailControl.valid;
 }
 }
6. <form #userForm="ngForm"
 (ngSubmit)="submitForm(userForm)"
 novalidate
 autocomplete="off"
 class="form-section"> 
 <div class="form-group form-inline">
 <label for="user-email">email: </label> 
 <input id="user-email"
 [ngModel]="model.userEmail"
 name="userEmail"
 required
 minlength="3"
 pattern=".+@.+"
 class="form-control">
 <span *ngIf="emailHasError(userForm.controls.userEmail)"
 class="text-danger">email is not valid</span>
 </div> 
 <button type="submit"
 [disabled]="!userForm.valid"
 class="btn btn-success">Submit</button>
 </form> component template
7. ngForm <form #userForm="ngForm"
 (ngSubmit)="submitForm(userForm)"> 
 <input [ngModel]="model.userEmail"
 name="userEmail"
 required
 minlength="3"
 pattern=".+@.+"> 
 <span *ngIf="emailHasError(userForm.controls.userEmail)"
 class="text-danger">email is not valid</span>
 
 <button type="submit"
 [disabled]="!userForm.valid">Submit</button>
 </form>
8. using ngForm <form #userForm="ngForm"
 (ngSubmit)="submitForm(userForm)"> 
 <input [ngModel]="model.userEmail"
 name="userEmail"
 required
 minlength="3"
 pattern=".+@.+"> 
 <span *ngIf="emailHasError(userForm.controls.userEmail)"
 class="text-danger">email is not valid</span>
 
 <button type="submit"
 [disabled]="!userForm.valid">Submit</button>
 </form> submitForm(formController) {
 this.model = formController.value;
 }
9. ngModel <form #userForm="ngForm"
 (ngSubmit)="submitForm(userForm)"> 
 <input [ngModel]="model.userEmail"
 name="userEmail"
 required
 minlength="3"
 pattern=".+@.+"> 
 <span *ngIf="emailHasError(userForm.controls.userEmail)"
 class="text-danger">email is not valid</span>
 
 <button type="submit"
 [disabled]="!userForm.valid">Submit</button>
 </form> model = {
 userEmail: 'user@example.com'
 };
10. validation <form #userForm="ngForm"
 (ngSubmit)="submitForm(userForm)"> 
 <input [ngModel]="model.userEmail"
 name="userEmail"
 required
 minlength="3"
 pattern=".+@.+"> 
 <span *ngIf="emailHasError(userForm.controls.userEmail)"
 class="text-danger">email is not valid</span>
 
 <button type="submit"
 [disabled]="!userForm.valid">Submit</button>
 </form> emailHasError(emailControl) {
 return emailControl && emailControl.touched && !emailControl.valid;
 }
11. error message <form #userForm="ngForm"
 (ngSubmit)="submitForm(userForm)"> 
 <input [ngModel]="model.userEmail"
 name="userEmail"
 required
 minlength="3"
 pattern=".+@.+"> 
 <span *ngIf="emailHasError(userForm.controls.userEmail)"
 class="text-danger">email is not valid</span>
 
 <button type="submit"
 [disabled]="!userForm.valid">Submit</button>
 </form> emailHasError(emailControl) {
 return emailControl && emailControl.touched && !emailControl.valid;
 }
12. form css classes <form #userForm="ngForm"
 (ngSubmit)="submitForm(userForm)"> 
 <input [ngModel]="model.userEmail"
 name="userEmail"
 required
 minlength="3"
 pattern=".+@.+"> 
 <span *ngIf="emailHasError(userForm.controls.userEmail)"
 class="text-danger">email is not valid</span>
 
 <button type="submit"
 [disabled]="!userForm.valid">Submit</button>
 </form> input.ng-invalid.ng-touched {
 border-color: red;
 }
13. form css classes ng-valid ng-invalid ng-untouched ng-touched ng-pristine ng-dirty
14. NgForm <form #userForm="ngForm"
 (ngSubmit)="submitForm(userForm)"> 
 <input [ngModel]="model.userEmail"
 name="userEmail"
 required
 minlength="3"
 pattern=".+@.+"> 
 <span *ngIf="emailHasError(userForm.controls.userEmail)"
 class="text-danger">email is not valid</span>
 
 <button type="submit"
 [disabled]="!userForm.valid">Submit</button>
 </form> NgForm dirty pristine touched untouched submitted valid
15. NgForm <form #userForm="ngForm"
 (ngSubmit)="submitForm(userForm)"> 
 <input [ngModel]="model.userEmail"
 name="userEmail"
 required
 minlength="3"
 pattern=".+@.+"> 
 <span *ngIf="emailHasError(userForm.controls.userEmail)"
 class="text-danger">email is not valid</span>
 
 <button type="submit"
 [disabled]="!userForm.valid">Submit</button>
 </form> NgForm value: { userEmail: ... }
16. FormGroup <form #userForm="ngForm"
 (ngSubmit)="submitForm(userForm)"> 
 <input [ngModel]="model.userEmail"
 name="userEmail"
 required
 minlength="3"
 pattern=".+@.+"> 
 <span *ngIf="emailHasError(userForm.controls.userEmail)"
 class="text-danger">email is not valid</span>
 
 <button type="submit"
 [disabled]="!userForm.valid">Submit</button>
 </form> NgForm form control FormGroup pending: boolean status: 'VALID' / 'INVALID' / 'PENDING'
17. FormControl <form #userForm="ngForm"
 (ngSubmit)="submitForm(userForm)"> 
 <input [ngModel]="model.userEmail"
 name="userEmail"
 required
 minlength="3"
 pattern=".+@.+"> 
 <span *ngIf="emailHasError(userForm.controls.userEmail)"
 class="text-danger">email is not valid</span>
 
 <button type="submit"
 [disabled]="!userForm.valid">Submit</button>
 </form> NgForm controls: { userEmail } FormControl value: 'user@example.com' status pending valid touched untouched dirty pristine
18. <form #userForm="ngForm"
 (ngSubmit)="submitForm(userForm)"> 
 <input [ngModel]="model.userEmail"
 name="userEmail"
 required
 minlength="3"
 pattern=".+@.+"> 
 <span *ngIf="emailHasError(userForm.controls.userEmail)"
 class="text-danger">email is not valid</span>
 
 <button type="submit"
 [disabled]="!userForm.valid">Submit</button>
 </form> FormControl NgForm controls: { userEmail } FormControl errors: { pattern: { actualValue: 's' requiredPattern: '^.+@.+$' }, minlength: actualLength: 2 requiredLength: 3 } }
19. Form Groups <form #userForm="ngForm"
 (ngSubmit)="submitForm(userForm)"> 
 <input [ngModel]="model.userEmail"
 name="userEmail"
 required
 minlength="3"
 pattern=".+@.+"> 
 <span *ngIf="emailHasError(userForm.controls.userEmail)"
 class="text-danger">email is not valid</span>
 
 <button type="submit"
 [disabled]="!userForm.valid">Submit</button>
 </form>
20. Form Groups <form #userForm="ngForm"
 (ngSubmit)="submitForm(userForm)"> <div ngModelGroup="userDetails" #userDetailsGroup="ngModelGroup"> 
 <input [ngModel]="model.userDetails.userEmail"
 name="userName"
 required
 pattern="[A-Za-z]{2,}"> <input [ngModel]="model.userDetails.userEmail"
 name="userEmail"
 required
 minlength="3"
 pattern=".+@.+">
 </div> <div *ngIf="userDetailsGroup.dirty && !userDetailsGroup.valid">details are not valid</div> 
 <button type="submit" [disabled]="!userForm.valid">Submit</button>
 </form>
21. Form Groups <form #userForm="ngForm"
 (ngSubmit)="submitForm(userForm)"> <div ngModelGroup="userDetails" #userDetailsGroup="ngModelGroup"> 
 <input [ngModel]="model.userDetails.userEmail"
 name="userName"
 required
 pattern="[A-Za-z]{2,}"> <input [ngModel]="model.userDetails.userEmail"
 name="userEmail"
 required
 minlength="3"
 pattern=".+@.+">
 </div> <div *ngIf="userDetailsGroup.dirty && !userDetailsGroup.valid">details are not valid</div> 
 <button type="submit" [disabled]="!userForm.valid">Submit</button>
 </form> NgForm value: { userDetails: { userName: '', userEmail: '' } }, controls: { userDetails } FormGroup controls: { userName, userEmail } FormControl
22. NgModelGroup <form #userForm="ngForm"
 (ngSubmit)="submitForm(userForm)"> <div ngModelGroup="userDetails" #userDetailsGroup="ngModelGroup"> 
 <input [ngModel]="model.userDetails.userEmail"
 name="userName"
 required
 pattern="[A-Za-z]{2,}"> <input [ngModel]="model.userDetails.userEmail"
 name="userEmail"
 required
 minlength="3"
 pattern=".+@.+">
 </div> <div *ngIf="userDetailsGroup.dirty && !userDetailsGroup.valid">details are not valid</div> 
 <button type="submit" [disabled]="!userForm.valid">Submit</button>
 </form> NgModelGroup value: { userName: '', userEmail: '' }, name: 'userDetails' control FormGroup controls: { userName, userEmail } FormControl
23. Model-Driven
24. 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() { ... } }
25. 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() { ... } }
26. model-driven (reactive) form <form [formGroup]="userForm"
 (ngSubmit)="submitForm()">
 
 <div formGroupName="userDetails">
 <input formControlName="userName">
 <input formControlName="userEmail"> 
 </div>
 
 <div *ngIf="userDetailsGroup.dirty && !userDetailsGroup.valid"> email is not valid
 </div>
 
 <button type="submit"
 [disabled]="!userForm.valid">Submit
 </button>
 
 </form>
27. 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
 }); <form [formGroup]="userForm"
 (ngSubmit)="submitForm()">
 
 <div formGroupName="userDetails">
 <input formControlName="userName">
 <input formControlName="userEmail"> 
 </div>
 </form>
28. 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
 }); <form [formGroup]="userForm"
 (ngSubmit)="submitForm()">
 
 <div formGroupName="userDetails">
 <input formControlName="userName">
 <input formControlName="userEmail"> 
 </div>
 </form>
29. 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( 'user@example.com' ); userDetailsGroup = new FormGroup({
 userName: this.userNameControl, userEmail: this.userEmailControl
 }); 
 userForm = new FormGroup({
 userDetails: this.userDetailsGroup
 });
30. 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( 'user@example.com', Validators.required ); userDetailsGroup = new FormGroup({
 userName: this.userNameControl, userEmail: this.userEmailControl
 }); 
 userForm = new FormGroup({
 userDetails: this.userDetailsGroup
 });
31. 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( 'user@example.com', [Validators.required, Validators.pattern('.+@.+')] ); userDetailsGroup = new FormGroup({
 userName: this.userNameControl, userEmail: this.userEmailControl
 }); 
 userForm = new FormGroup({
 userDetails: this.userDetailsGroup
 });
32. Summary
33. Questions? Thank You!
34. Shmuela Jacobs shmuela@500tech.com linkedin.com/in/shmuelaj github.com/shmool @ShmuelaJ