Slide 1
Slide 1 text
Formulare in Angular
Web Developer Conference 17.10.2018
Thomas Gassmann @gassmannT
Slide 2
Slide 2 text
Thomas Gassmann
Senior Consultant,
Trainer, Speaker
thomasgassmann.net
@gassmannT
17.10.2018 WDC - Formulare in Angular
2
Slide 3
Slide 3 text
Agenda
17.10.2018 WDC - Formulare in Angular
3
▪ Introduction
▪ Template-Driven Forms
▪ Reactive Forms
▪ Custom Controls
Slide 4
Slide 4 text
Angular Forms
17.10.2018 WDC - Formulare in Angular
4
Slide 5
Slide 5 text
Form technologies
17.10.2018 WDC - Formulare in Angular
5
Template-driven Forms
▪ Use a Component’s
Template
▪ Unit Test against DOM
Reactive Forms
▪ Use a Component’s
Template
▪ Create a Form Model in
TypeScript
▪ Unit Test against Form
Model
▪ Validation in Form Model
Slide 6
Slide 6 text
Building Blocks: State
17.10.2018 WDC - Formulare in Angular
6
Value Changed:
pristine
dirty
Validity:
valid
invalid
Visited:
touched
untouched
Slide 7
Slide 7 text
Building Blocks
17.10.2018 WDC - Formulare in Angular
7
FormControl
Tracks state of an
individual input
FormGroup
Tracks state of a group
of FormControls
Slide 8
Slide 8 text
Form Model
17.10.2018 WDC - Formulare in Angular
8
▪ Instances of FormControl or FormGroup
▪ Retains form state
▪ Retains form value
▪ Retains child controls (FormControls or FormGroups)
Slide 9
Slide 9 text
Template-Driven Forms
17.10.2018 WDC - Formulare in Angular
9
▪ Kind of forms used with Angular 1.x
▪ Bind directives and behavious to your templates
▪ Used with ngModel, required, minlength etc.
▪ The template is doing the work
▪ Angular automatically generates our FormModel
Slide 10
Slide 10 text
Reactive Forms
17.10.2018 WDC - Formulare in Angular
10
▪ Also known as model-driven
▪ Avoiding directives such as ngModel, required etc.
▪ Use the underlying APIs to do the work by creating a
instance inside a component class and construct
JavaScript models.
▪ Very testable
▪ Keeps all logic in the same place
Slide 11
Slide 11 text
Directives: Template-Driven
17.10.2018 WDC - Formulare in Angular
11
▪ ngForm
▪ ngModel
▪ ngModelGroup
Slide 12
Slide 12 text
Directives: Reactive Forms
17.10.2018 WDC - Formulare in Angular
12
▪ formGroup
▪ formControl
▪ formControlName
▪ formGroupName
Slide 13
Slide 13 text
Starting Position
17.10.2018 WDC - Formulare in Angular
13
Firstname
Lastname
Email
Confirm Email
Save
Slide 14
Slide 14 text
Template Driven Forms
17.10.2018 WDC - Formulare in Angular
14
Slide 15
Slide 15 text
Template-Driven Forms
17.10.2018 WDC - Formulare in Angular
15
import { FormsModule } from '@angular/forms’;
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
▪ Add the FormsModule to your AppModule to use
ngModel
Slide 16
Slide 16 text
Template-Driven Forms
17.10.2018 WDC - Formulare in Angular
16
@Component({...
templateUrl: 'employee-form.component.html'
})
export class EmployeeFormComponent {
employee:Employee = {firstname: 'Thomas',
lastname: 'Gassmann',
email: '[email protected]'};
}
▪ Declare our model class
Slide 17
Slide 17 text
Template-Driven Forms
17.10.2018 WDC - Formulare in Angular
17
Firstname
▪ Binding ngForm and ngModel
Slide 18
Slide 18 text
Template-Driven Forms
17.10.2018 WDC - Formulare in Angular
18
…
▪ Add submit functionality by adding the ngSubmit
export class AppComponent {
employee:Employee= {…};
onSubmit({ valid }: { valid: boolean }) {
console.log(valid)
}
}
Slide 19
Slide 19 text
Template-Driven Forms: Error Validation
17.10.2018 WDC - Formulare in Angular
19
▪ Disabling our submit button until the form is valid
…
Save
Slide 20
Slide 20 text
Template-Driven Forms: Error Validation
17.10.2018 WDC - Formulare in Angular
20
▪ Add required and show error message if needed
…
Firstname is required
…
Slide 21
Slide 21 text
Template-Driven Forms: Error Validation
17.10.2018 WDC - Formulare in Angular
21
▪ Extend our forms with nested objects and data
Firstname is required
Slide 22
Slide 22 text
Demo
13.09.2018 Swiss Angular Meetup - Angular Elements
22
Slide 23
Slide 23 text
Reactive Form
17.10.2018 WDC - Formulare in Angular
23
Slide 24
Slide 24 text
Reactive Forms
17.10.2018 WDC - Formulare in Angular
24
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [ BrowserModule, ReactiveFormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
▪ Add the ReactiveFormsModule to your AppModule
Slide 25
Slide 25 text
Reactive Forms
17.10.2018 WDC - Formulare in Angular
25
ngOnInit() {
this.form = new FormGroup({
firstname: new FormControl('tga'),
email: new FormControl('[email protected]')
});
}
▪ Create our FormModel
Slide 26
Slide 26 text
Reactive Forms
17.10.2018 WDC - Formulare in Angular
26
Firstname
…
▪ Add formGroup and formControlName on the form
Slide 27
Slide 27 text
Reactive Forms
17.10.2018 WDC - Formulare in Angular
27
this.employee.setValue({ firstname: 'Thomas’,
lastname: 'Gassmann', email: '[email protected]' });
// OR
this.form.patchValue({ firstname: 'Thomas' });
▪ Set a value from our model use setValue or patchValue
Slide 28
Slide 28 text
Reactive Forms
17.10.2018 WDC - Formulare in Angular
28
…
▪ Add submit functionality by adding the ngSubmit
export class AppComponent {
form:FormGroup= {…};
onSubmit() {
console.log(form.valid)
}
}
Slide 29
Slide 29 text
Reactive Forms: Error Validation
17.10.2018 WDC - Formulare in Angular
29
▪ Disabling our submit button until the form is valid
…
Save
Slide 30
Slide 30 text
Reactive Forms: Error Validation
17.10.2018 WDC - Formulare in Angular
30
@Component({...})
export class EmployeeFormComponent {
form:FormGroup;
ngOnInit() {
this.form = new FormGroup({
firstname: new FormControl('', Validators.required),
email: new FormControl('',
[Validators.required, Validators.minLength(2)]),
});
}
}
Slide 31
Slide 31 text
Reactive Forms: Error Validation
17.10.2018 WDC - Formulare in Angular
31
▪ Use .get() method that will look up for the control
Firstname is required
Slide 32
Slide 32 text
Reactive Forms: Error Validation
17.10.2018 WDC - Formulare in Angular
32
@Component({...})
export class EmployeeFormComponent {
form:FormGroup;
ngOnInit() {
this.form = new FormGroup({
firstname: new FormControl('', Validators.required),
email: new FormControl('',
[Validators.required, Validators.minLength(2)]),
});
}
}
Slide 33
Slide 33 text
Reactive Forms - FormBuilder
17.10.2018 WDC - Formulare in Angular
33
▪ Usage of FormGroup and FormControl is complex
▪ Let’s simplify it with FormBuilder
▪ FormBuilder is a helper class to build forms
▪ It is a flexible and common way to configure forms
Slide 34
Slide 34 text
Reactive Forms - FormBuilder
17.10.2018 WDC - Formulare in Angular
34
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
firstname: ['', Validators.required],
email: ['',
[Validators.required,Validators.minLength(4)]],
});
}
Slide 35
Slide 35 text
Demo
13.09.2018 Swiss Angular Meetup - Angular Elements
35
Slide 36
Slide 36 text
Custom Control
17.10.2018 WDC - Formulare in Angular
36
Slide 37
Slide 37 text
ControlValueAccessor
17.10.2018 WDC - Formulare in Angular
37
▪ «Bridge» between model and view/DOM
▪ Interface which takes care of writing a value and inform
about changes
▪ There is a ControlValueAccessor for every input type
Slide 38
Slide 38 text
Implementing ControlValueAccessor
17.10.2018 WDC - Formulare in Angular
38
export interface ControlValueAccessor {
// writes a new value
writeValue(obj: any) : void
// registers a handler that should be called when
something in the view has changed
registerOnChange(fn: any) : void
// registers a handler specifically for when a
control receives a touch event
registerOnTouched(fn: any) : void
}
Slide 39
Slide 39 text
Registering the ControlValueAccessor
17.10.2018 WDC - Formulare in Angular
39
@Component({ …
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => EmployeeRatingComponent),
multi: true
}
]
})
export class EmployeeRatingComponent implements
ControlValueAccessor {
}
Slide 40
Slide 40 text
Employee Rating
17.10.2018 WDC - Formulare in Angular
40
writeValue(value: number): void {
if (value) {
this.counterValue = value;
}
}
registerOnChange(fn: (rating: number) => void) {
this.propagateChange = fn;
}
registerOnTouched(fn: () => void) {
this.propagateTouched = fn;
}
Slide 41
Slide 41 text
Demo
13.09.2018 Swiss Angular Meetup - Angular Elements
41
Slide 42
Slide 42 text
updateOn option
17.10.2018 WDC - Formulare in Angular
42
▪ Updating on every keystroke can sometimes be too
expensive
▪ Angular 5 provides a new option that improves
performance by delaying form control updates until the
blur or the submit event.
email: new FormControl(null, {
validators: Validators.required,
updateOn: 'blur'
}),
Slide 43
Slide 43 text
When use Reactive Forms
17.10.2018 WDC - Formulare in Angular
43
▪ Dynamically add input elements
▪ Watch what the user types
▪ Different validation for different situations
▪ Immutable data structures
Slide 44
Slide 44 text
Summary
17.10.2018 WDC - Formulare in Angular
44
Template-Driven
▪ Generated form model
▪ HTML validation
▪ Two-way data binding
Reactive Forms
▪ Manually created form
model
▪ Validation in the class
▪ No two-way data binding
Slide 45
Slide 45 text
Ressources
17.10.2018 WDC - Formulare in Angular
45
▪ github.com/gassmannT/AngularForms
▪ thomasgassmann.net
▪ swissangular.com
▪ m.trivadis.com/angular
▪ angular-academy.ch
Slide 46
Slide 46 text
Thank you
Thomas Gassmann
@gassmannT
thomasgassmann.net
[email protected]
17.10.2018 WDC - Formulare in Angular
46
Slide 47
Slide 47 text
No content