Angular 2 Forms

@jurisicmarko

marko.jurisic@infonova.com

AngularConnect takeaways

  • Angular 2 features
  • Release cycles
  • Marketing & Ecosystem

Angular 2 overview

Angular release cyles

Text

*Angular 2.1.0 released on October 13

Angular Ecosystem

  • Augury
  • Electron
  • Angular Universal
  • ag-grid
  • mobile/progressive

AngularJS 

as new official name

Angular 2 Forms

Template Driven

Implicit creation of FormControls via template

 

easier to setup for simple cases

Reactive

Explicit creation of all form elements

 

easier to test, provides more control

Template Driven

FormsModule

 

ngForm

ngModel

ngModelGroup

Reactive

ReactiveFormsModule

 

formControlName

formGroupName

formControl

formGroup

formArray

 

Form Building Blocks

  • Form Controls
  • Validators
  • Observers

 

 

Form Controls

  • FormControl
  • FormGroup
  • FormArray
     
  • FormBuilder

Form Controls

  • Value
  • Validation status
  • User interaction
  • Events

FormControl

 // create a new FormControl with the value "Willy"
 let nameControl = new FormControl("Willy");

 let name = nameControl.value; // -> Willy

 // now we can query this control for certain values:
 nameControl.errors // -> StringMap<string, any> of errors
 nameControl.dirty // -> false
 nameControl.valid // -> true
<input type="text" [formControl]="name" />

FormGroup


 let personInfo = new FormGroup({
     firstName: new FormControl("Willy"),
     lastName: new FormControl("Wonka"),
     zip: new FormControl("1020")
 })
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
    <input formControlName="firstName" placeholder="First name">
    <input formControlName="lastName" placeholder="Last name">    
    <input formControlName="zip" placeholder="zip">
    <button type="submit" class="btn default">Submit</button>
</form>

FormArray

let formArray: FormArray;

addHolidayControl(holiday?:Holiday):void {
    let holidayControl: FormGroup = this.fb.group(
        {
            description: this.fb.control(undefined, Validators.required),
            date: this.fb.control(undefined, Validators.required)
        });
    this.formArray.push(holidayControl);
}

Validators

// simplest use-case
    this.fb.control(undefined, Validators.required)
this.fg = this.fb.group(
    {
        common: this.fgCommon,
        holidays: this.fgHolidays
    },
    {
        validator: ((fg: FormGroup) => {
            let fgCommon: FormGroup = <FormGroup>fg.get('common');
            let fgHolidays: FormGroup = <FormGroup>fg.get('holidays');

            let dateFromControl: AbstractControl = fgCommon.get('date_domain_from');
            let dateToControl: AbstractControl = fgCommon.get('date_domain_to');

            let fromToResult = this.validateFromTo(dateFromControl, dateToControl);
            let validateHolidaysResult = this.validateHolidays(dateFromControl, dateToControl, 
                  fgHolidays);
            return _.assign({}, fromToResult, validateHolidaysResult);
        })
    }
);

Demo

References

QUESTIONS?

@jurisicmarko

marko.jurisic@infonova.com

Angular 2 Forms

By Marko Jurišić

Loading comments...

More from Marko Jurišić