7. Forms and simple validations

Simple form example: http://plnkr.co/edit/ZrJZq0kvOFvtnF05DIhH?p=preview

Transcript

2. Forms and simple validations
3. What do we use forms for ? • Get data from the user, serialize it and save it. • Validate the data and show error messages. • Populate data on initialization and display it.
4. What do we need ? • Custom controls • Custom validators • Create controls dynamically
5. Forms Approaches • Template-driven approach (Angular 1 style) • Model-driven approach (Reactive, in component class)
6. Building Blocks • FormControl • FormGroup • FormArray
7. Form Control • Get the value of the input • Input validation • User interactions • Value change https://github.com/angular/angular/blob/master/modules/%40angular/ forms/src/directives/reactive_directives/form_control_directive.ts#L26
8. Form Group Form Control Form Control Form Control Form Control Form Group name name name name
9. Groups • Validate formControls together • Serialize formControl values together
10. Form Array Form Control Form Control Form Control Form Control Form Array 0 2 3 1 Used to create dynamic forms of unknown length
11. Forms Approaches • Template-driven approach (FormsModule | Angular 1 style) 
 ngForm, ngModel, ngModelGroup • Model-driven approach (ReactiveFormsModule) formControlName, formGroupName, formControlArray, formControl, formGroup
12. FormsModule vs ReactiveFormsModule • Implicit creation of FormControls by directives • Template as source of truth • Async • Explicit creation of FormControls • Component class as source of truth • Sync
13. Reactive approach
14. Reactive approach
15. Reactive approach
16. Reactive approach (using form builder) Parent form group
17. Reactive approach (using form builder and validators)
18. Reactive approach (using nested form group)
19. Reactive approach (using nested form group)
20. Populating data in reactive form • form.setValue(...) - you assign every form control value at once by passing in a data object whose properties exactly match the form model behind the FormGroup. • form.patchValue(...) - you can assign values to specific controls in a FormGroup by supplying an object of key/value pairs for just the controls of interest. (cannot check for missing control values)
21. Resetting the form • form.reset({...}) - restores all flags to the pristine. The method also takes optional state value so you can reset the flags and the control values at the same.
 
 Internally, reset passes the argument to setValue
22. FormArray template
23. FormArray
24. FormArray class (1)
25. FormArray class (2)
26. Demo
27. Template-driven approach
28. Template-driven approach
29. NgModel [(NgModel)] = [ngModel] + (ngModelChange)
30. Two way data binding - NgModel
31. Two way data binding
32. NgModel • Use to track control state and validity • The directive doesn't just track state. It updates the control with special Angular CSS classes that reflect the state.
33. NgModel Classes
34. Questions?