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

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

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

Template Driven

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;
 }
 }


 
 Submit
 component template

ngForm 
 
 email is not valid
 
 Submit


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

ngModel 
 
 email is not valid
 
 Submit
 model = {
 userEmail: 'user@example.com'
 };

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

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

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

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

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

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

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

FormControl 
 
 email is not valid
 
 Submit
 NgForm controls: { userEmail } FormControl value: 'user@example.com' status pending valid touched untouched dirty pristine


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

Form Groups 
 
 email is not valid
 
 Submit


Form Groups 
 Submit


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

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

Model-Driven

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() { ... } }

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() { ... } }

model-driven (reactive) form 
 
 
 
 
 
 Submit
 
 


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
 }); 
 
 


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
 }); 
 
 


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
 });

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
 });

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
 });

Summary

Questions? Thank You!

Shmuela Jacobs shmuela@500tech.com linkedin.com/in/shmuelaj github.com/shmool @ShmuelaJ