Formulare in Angular – Varianten, Konzepte und Umsetzung

Formulare in Angular
Web Developer Conference 17.10.2018
Thomas Gassmann @gassmannT

View Slide

Thomas Gassmann
Senior Consultant,
Trainer, Speaker
thomasgassmann.net
@gassmannT
17.10.2018 WDC - Formulare in Angular
2

View Slide

Agenda
3
▪ Introduction
▪ Template-Driven Forms
▪ Reactive Forms
▪ Custom Controls

View Slide

Angular Forms
4

View Slide

Form technologies
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

View Slide

Building Blocks: State
6
Value Changed:
pristine
dirty
Validity:
valid
invalid
Visited:
touched
untouched

View Slide

Building Blocks
7
FormControl
Tracks state of an
individual input
FormGroup
Tracks state of a group
of FormControls

View Slide

Form Model
8
▪ Instances of FormControl or FormGroup
▪ Retains form state
▪ Retains form value
▪ Retains child controls (FormControls or FormGroups)

View Slide

Template-Driven Forms
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

View Slide

Reactive Forms
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

View Slide

Directives: Template-Driven
11

[(ngModel)]="employee.firstname">

▪ ngForm
▪ ngModel
▪ ngModelGroup

View Slide

Directives: Reactive Forms
12

formControlName="firstname">

▪ formGroup
▪ formControl
▪ formControlName
▪ formGroupName

View Slide

Starting Position
13

Firstname

Lastname

Email

Confirm Email

Save

View Slide

Template Driven Forms
14

View Slide

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

View Slide

16
@Component({...
templateUrl: 'employee-form.component.html'
})
export class EmployeeFormComponent {
employee:Employee = {firstname: 'Thomas',
lastname: 'Gassmann',
email: '[email protected]'};
}
▪ Declare our model class

View Slide

17

Firstname
name="firstname"
[(ngModel)]="employee.firstname"
class="form-control">

▪ Binding ngForm and ngModel

View Slide

18

…

▪ Add submit functionality by adding the ngSubmit
export class AppComponent {
employee:Employee= {…};
onSubmit({ valid }: { valid: boolean }) {
console.log(valid)
}
}

View Slide

Template-Driven Forms: Error Validation
19
▪ Disabling our submit button until the form is valid

…
[disabled]="f.invalid">Save

View Slide

20
▪ Add required and show error message if needed
…
[(ngModel)]= "employee.firstname" required>

Firstname is required

…

View Slide

21
▪ Extend our forms with nested objects and data
#firstname="ngModel"
[(ngModel)]= "employee.firstname" required>
firstname.touched" class="error">

View Slide

Demo
13.09.2018 Swiss Angular Meetup - Angular Elements
22

View Slide

Reactive Form
23

View Slide

Reactive Forms
24
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [ BrowserModule, ReactiveFormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
▪ Add the ReactiveFormsModule to your AppModule

View Slide

Reactive Forms
25
ngOnInit() {
this.form = new FormGroup({
firstname: new FormControl('tga'),
email: new FormControl('[email protected]')
});
}
▪ Create our FormModel

View Slide

Reactive Forms
26

Firstname

…

▪ Add formGroup and formControlName on the form

View Slide

Reactive Forms
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

View Slide

Reactive Forms
28

…

▪ Add submit functionality by adding the ngSubmit
export class AppComponent {
form:FormGroup= {…};
onSubmit() {
console.log(form.valid)
}
}

View Slide

Reactive Forms: Error Validation
29
▪ Disabling our submit button until the form is valid

…
[disabled]="form.invalid">Save

View Slide

30
@Component({...})
form:FormGroup;
ngOnInit() {
firstname: new FormControl('', Validators.required),
email: new FormControl('',
[Validators.required, Validators.minLength(2)]),
});
}
}

View Slide

31
▪ Use .get() method that will look up for the control
&& form.get('firstname').touched">

View Slide

32
@Component({...})
form:FormGroup;
ngOnInit() {
firstname: new FormControl('', Validators.required),
email: new FormControl('',
[Validators.required, Validators.minLength(2)]),
});
}
}

View Slide

Reactive Forms - FormBuilder
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

View Slide

Reactive Forms - FormBuilder
34
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
firstname: ['', Validators.required],
email: ['',
[Validators.required,Validators.minLength(4)]],
});
}

View Slide

Demo
35

View Slide

Custom Control
36

View Slide

ControlValueAccessor
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

View Slide

Implementing ControlValueAccessor
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
}

View Slide

Registering the ControlValueAccessor
39
@Component({ …
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => EmployeeRatingComponent),
multi: true
}
]
})
export class EmployeeRatingComponent implements
ControlValueAccessor {
}

View Slide

Employee Rating
40
writeValue(value: number): void {
if (value) {
this.counterValue = value;
}
}
registerOnChange(fn: (rating: number) => void) {
this.propagateChange = fn;
}
registerOnTouched(fn: () => void) {
this.propagateTouched = fn;
}

View Slide

Demo
41

View Slide

updateOn option
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'
}),

View Slide

When use Reactive Forms
43
▪ Dynamically add input elements
▪ Watch what the user types
▪ Different validation for different situations
▪ Immutable data structures

View Slide

Summary
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

View Slide

Ressources
45
▪ github.com/gassmannT/AngularForms
▪ thomasgassmann.net
▪ swissangular.com
▪ m.trivadis.com/angular
▪ angular-academy.ch

View Slide

Thank you
Thomas Gassmann
@gassmannT
thomasgassmann.net
[email protected]
46

View Slide

View Slide

Formulare in Angular – Varianten, Konzepte und Umsetzung

Formulare in Angular – Varianten, Konzepte und Umsetzung

Thomas Gassmann

More Decks by Thomas Gassmann

Other Decks in Programming

Featured

Transcript