Slide 1
Slide 1 text
Angular Reactive
Forms
Developing Forms and
Validation with Angular
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Template Forms
Reactive Forms
Slide 4
Slide 4 text
Template Forms
Reactive Forms
Slide 5
Slide 5 text
Why?
Slide 6
Slide 6 text
Reactive Forms
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [...],
imports: [
ReactiveFormsModule,
],
providers: [],
})
export class AppModule {}
1
2
3
4
5
6
7
8
9
10
11
Slide 7
Slide 7 text
Reactive Forms
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [...],
imports: [
ReactiveFormsModule,
],
providers: [],
})
export class AppModule {}
1
2
3
4
5
6
7
8
9
10
11
import { ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
1
2
3
@NgModule({
4
declarations: [...],
5
imports: [
6
ReactiveFormsModule,
7
],
8
providers: [],
9
})
10
export class AppModule {}
11
Slide 8
Slide 8 text
Reactive Forms
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [...],
imports: [
ReactiveFormsModule,
],
providers: [],
})
export class AppModule {}
1
2
3
4
5
6
7
8
9
10
11
import { ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
1
2
3
@NgModule({
4
declarations: [...],
5
imports: [
6
ReactiveFormsModule,
7
],
8
providers: [],
9
})
10
export class AppModule {}
11
imports: [
ReactiveFormsModule,
],
import { NgModule } from '@angular/core';
1
import { ReactiveFormsModule } from '@angular/forms';
2
3
@NgModule({
4
declarations: [...],
5
6
7
8
providers: [],
9
})
10
export class AppModule {}
11
Slide 9
Slide 9 text
Abstract Control
Slide 10
Slide 10 text
abstract class AbstractControl
Slide 11
Slide 11 text
@angular/forms
abstract class AbstractControl
Slide 12
Slide 12 text
FormControl
FormGroup
FormArray
Slide 13
Slide 13 text
FormControl
Slide 14
Slide 14 text
FormControl
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms'
@Component({
selector: 'my-app',
template: ``,
})
export class AppComponent {
name = new FormControl();
}
1
2
3
4
5
6
7
8
9
10
Slide 15
Slide 15 text
FormControl
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms'
@Component({
selector: 'my-app',
template: ``,
})
export class AppComponent {
name = new FormControl();
}
1
2
3
4
5
6
7
8
9
10
import { FormControl } from '@angular/forms'
import { Component } from '@angular/core';
1
2
3
@Component({
4
selector: 'my-app',
5
template: ``,
6
})
7
export class AppComponent {
8
name = new FormControl();
9
}
10
Slide 16
Slide 16 text
FormControl
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms'
@Component({
selector: 'my-app',
template: ``,
})
export class AppComponent {
name = new FormControl();
}
1
2
3
4
5
6
7
8
9
10
import { FormControl } from '@angular/forms'
import { Component } from '@angular/core';
1
2
3
@Component({
4
selector: 'my-app',
5
template: ``,
6
})
7
export class AppComponent {
8
name = new FormControl();
9
}
10
template: ``,
import { Component } from '@angular/core';
1
import { FormControl } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
6
})
7
export class AppComponent {
8
name = new FormControl();
9
}
10
Slide 17
Slide 17 text
FormControl
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms'
@Component({
selector: 'my-app',
template: ``,
})
export class AppComponent {
name = new FormControl();
}
1
2
3
4
5
6
7
8
9
10
import { FormControl } from '@angular/forms'
import { Component } from '@angular/core';
1
2
3
@Component({
4
selector: 'my-app',
5
template: ``,
6
})
7
export class AppComponent {
8
name = new FormControl();
9
}
10
template: ``,
import { Component } from '@angular/core';
1
import { FormControl } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
6
})
7
export class AppComponent {
8
name = new FormControl();
9
}
10
name = new FormControl();
import { Component } from '@angular/core';
1
import { FormControl } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: ``,
6
})
7
export class AppComponent {
8
9
}
10
Slide 18
Slide 18 text
FormControl
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms'
@Component({
selector: 'my-app',
template: ``,
})
export class AppComponent {
name = new FormControl();
}
1
2
3
4
5
6
7
8
9
10
import { FormControl } from '@angular/forms'
import { Component } from '@angular/core';
1
2
3
@Component({
4
selector: 'my-app',
5
template: ``,
6
})
7
export class AppComponent {
8
name = new FormControl();
9
}
10
template: ``,
import { Component } from '@angular/core';
1
import { FormControl } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
6
})
7
export class AppComponent {
8
name = new FormControl();
9
}
10
name = new FormControl();
import { Component } from '@angular/core';
1
import { FormControl } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: ``,
6
})
7
export class AppComponent {
8
9
}
10
template: ``,
name = new FormControl();
import { Component } from '@angular/core';
1
import { FormControl } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
6
})
7
export class AppComponent {
8
9
}
10
Slide 19
Slide 19 text
FormControl
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms'
@Component({
selector: 'my-app',
template: `
{{ name.status | json}}
{{ name.value | json}}
{{ name.errors | json}}
`,
})
export class AppComponent {
name = new FormControl();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Slide 20
Slide 20 text
FormControl
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms'
@Component({
selector: 'my-app',
template: `
{{ name.status | json}}
{{ name.value | json}}
{{ name.errors | json}}
`,
})
export class AppComponent {
name = new FormControl();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{{ name.status | json}}
{{ name.value | json}}
{{ name.errors | json}}
import { Component } from '@angular/core';
1
import { FormControl } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
9
10
`,
11
})
12
export class AppComponent {
13
name = new FormControl();
14
}
15
Slide 21
Slide 21 text
FormControl
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms'
@Component({
selector: 'my-app',
template: `
{{ name.status | json}}
{{ name.value | json}}
{{ name.errors | json}}
`,
})
export class AppComponent {
name = new FormControl();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{{ name.status | json}}
{{ name.value | json}}
{{ name.errors | json}}
import { Component } from '@angular/core';
1
import { FormControl } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
9
10
`,
11
})
12
export class AppComponent {
13
name = new FormControl();
14
}
15
{{ name.status | json}}
{{ name.value | json}}
{{ name.errors | json}}
name = new FormControl();
import { Component } from '@angular/core';
1
import { FormControl } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
9
10
`,
11
})
12
export class AppComponent {
13
14
}
15
Slide 22
Slide 22 text
FormControl
value: any
1
status: string
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
Slide 23
Slide 23 text
FormControl
value: any
1
status: string
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
status: string
value: any
1
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
Slide 24
Slide 24 text
FormControl
value: any
1
status: string
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
status: string
value: any
1
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
valid: boolean
invalid: boolean
value: any
1
status: string
2
3
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
Slide 25
Slide 25 text
FormControl
value: any
1
status: string
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
status: string
value: any
1
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
valid: boolean
invalid: boolean
value: any
1
status: string
2
3
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
pending: boolean
disabled: boolean
enabled: boolean
value: any
1
status: string
2
valid: boolean
3
invalid: boolean
4
5
6
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
Slide 26
Slide 26 text
FormControl
value: any
1
status: string
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
status: string
value: any
1
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
valid: boolean
invalid: boolean
value: any
1
status: string
2
3
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
pending: boolean
disabled: boolean
enabled: boolean
value: any
1
status: string
2
valid: boolean
3
invalid: boolean
4
5
6
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
errors: ValidationErrors | null
value: any
1
status: string
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
Slide 27
Slide 27 text
FormControl
value: any
1
status: string
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
status: string
value: any
1
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
valid: boolean
invalid: boolean
value: any
1
status: string
2
3
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
pending: boolean
disabled: boolean
enabled: boolean
value: any
1
status: string
2
valid: boolean
3
invalid: boolean
4
5
6
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
errors: ValidationErrors | null
value: any
1
status: string
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
pristine: boolean
dirty: boolean
touched: boolean
untouched: boolean
value: any
1
status: string
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
9
10
11
12
valueChanges: Observable
13
statusChanges: Observable
14
Slide 28
Slide 28 text
FormControl
value: any
1
status: string
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
status: string
value: any
1
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
valid: boolean
invalid: boolean
value: any
1
status: string
2
3
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
pending: boolean
disabled: boolean
enabled: boolean
value: any
1
status: string
2
valid: boolean
3
invalid: boolean
4
5
6
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
errors: ValidationErrors | null
value: any
1
status: string
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
valueChanges: Observable
13
statusChanges: Observable
14
pristine: boolean
dirty: boolean
touched: boolean
untouched: boolean
value: any
1
status: string
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
9
10
11
12
valueChanges: Observable
13
statusChanges: Observable
14
valueChanges: Observable
statusChanges: Observable
value: any
1
status: string
2
valid: boolean
3
invalid: boolean
4
pending: boolean
5
disabled: boolean
6
enabled: boolean
7
errors: ValidationErrors | null
8
pristine: boolean
9
dirty: boolean
10
touched: boolean
11
untouched: boolean
12
13
14
Slide 29
Slide 29 text
FormControl
FormGroup
FormArray
Slide 30
Slide 30 text
FormControl
FormGroup
FormArray
Slide 31
Slide 31 text
FormControl
FormGroup
FormArray
Slide 32
Slide 32 text
FormGroup
Slide 33
Slide 33 text
FormGroup
Container for
Slide 34
Slide 34 text
FormGroup
Container for
FormControls
Slide 35
Slide 35 text
FormGroup
Container for
FormControls
FormGroups
Slide 36
Slide 36 text
FormGroup
[Object object]
{
...
}
Slide 37
Slide 37 text
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms'
@Component({
selector: 'my-app',
template: `
Send
`
})
export class AppComponent {
myFormGroup = new FormGroup({
firstName: new FormControl()
});
onSubmit() {
console.log(this.myFormGroup.get("firstName"))
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Slide 38
Slide 38 text
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms'
@Component({
selector: 'my-app',
template: `
Send
`
})
export class AppComponent {
myFormGroup = new FormGroup({
firstName: new FormControl()
});
onSubmit() {
console.log(this.myFormGroup.get("firstName"))
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { FormControl, FormGroup } from '@angular/forms'
import { Component } from '@angular/core';
1
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
myFormGroup = new FormGroup({
14
firstName: new FormControl()
15
});
16
17
onSubmit() {
18
console.log(this.myFormGroup.get("firstName"))
19
}
20
}
21
Slide 39
Slide 39 text
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms'
@Component({
selector: 'my-app',
template: `
Send
`
})
export class AppComponent {
myFormGroup = new FormGroup({
firstName: new FormControl()
});
onSubmit() {
console.log(this.myFormGroup.get("firstName"))
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { FormControl, FormGroup } from '@angular/forms'
import { Component } from '@angular/core';
1
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
myFormGroup = new FormGroup({
14
firstName: new FormControl()
15
});
16
17
onSubmit() {
18
console.log(this.myFormGroup.get("firstName"))
19
}
20
}
21
import { Component } from '@angular/core';
1
import { FormControl, FormGroup } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
myFormGroup = new FormGroup({
14
firstName: new FormControl()
15
});
16
17
onSubmit() {
18
console.log(this.myFormGroup.get("firstName"))
19
}
20
}
21
Slide 40
Slide 40 text
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms'
@Component({
selector: 'my-app',
template: `
Send
`
})
export class AppComponent {
myFormGroup = new FormGroup({
firstName: new FormControl()
});
onSubmit() {
console.log(this.myFormGroup.get("firstName"))
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { FormControl, FormGroup } from '@angular/forms'
import { Component } from '@angular/core';
1
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
myFormGroup = new FormGroup({
14
firstName: new FormControl()
15
});
16
17
onSubmit() {
18
console.log(this.myFormGroup.get("firstName"))
19
}
20
}
21
import { Component } from '@angular/core';
1
import { FormControl, FormGroup } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
myFormGroup = new FormGroup({
14
firstName: new FormControl()
15
});
16
17
onSubmit() {
18
console.log(this.myFormGroup.get("firstName"))
19
}
20
}
21
import { Component } from '@angular/core';
1
import { FormControl, FormGroup } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
myFormGroup = new FormGroup({
14
firstName: new FormControl()
15
});
16
17
onSubmit() {
18
console.log(this.myFormGroup.get("firstName"))
19
}
20
}
21
Slide 41
Slide 41 text
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms'
@Component({
selector: 'my-app',
template: `
Send
`
})
export class AppComponent {
myFormGroup = new FormGroup({
firstName: new FormControl()
});
onSubmit() {
console.log(this.myFormGroup.get("firstName"))
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { FormControl, FormGroup } from '@angular/forms'
import { Component } from '@angular/core';
1
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
myFormGroup = new FormGroup({
14
firstName: new FormControl()
15
});
16
17
onSubmit() {
18
console.log(this.myFormGroup.get("firstName"))
19
}
20
}
21
import { Component } from '@angular/core';
1
import { FormControl, FormGroup } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
myFormGroup = new FormGroup({
14
firstName: new FormControl()
15
});
16
17
onSubmit() {
18
console.log(this.myFormGroup.get("firstName"))
19
}
20
}
21
import { Component } from '@angular/core';
1
import { FormControl, FormGroup } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
myFormGroup = new FormGroup({
14
firstName: new FormControl()
15
});
16
17
onSubmit() {
18
console.log(this.myFormGroup.get("firstName"))
19
}
20
}
21
myFormGroup = new FormGroup({
firstName: new FormControl()
});
import { Component } from '@angular/core';
1
import { FormControl, FormGroup } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
14
15
16
17
onSubmit() {
18
console.log(this.myFormGroup.get("firstName"))
19
}
20
}
21
Slide 42
Slide 42 text
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms'
@Component({
selector: 'my-app',
template: `
Send
`
})
export class AppComponent {
myFormGroup = new FormGroup({
firstName: new FormControl()
});
onSubmit() {
console.log(this.myFormGroup.get("firstName"))
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { FormControl, FormGroup } from '@angular/forms'
import { Component } from '@angular/core';
1
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
myFormGroup = new FormGroup({
14
firstName: new FormControl()
15
});
16
17
onSubmit() {
18
console.log(this.myFormGroup.get("firstName"))
19
}
20
}
21
import { Component } from '@angular/core';
1
import { FormControl, FormGroup } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
myFormGroup = new FormGroup({
14
firstName: new FormControl()
15
});
16
17
onSubmit() {
18
console.log(this.myFormGroup.get("firstName"))
19
}
20
}
21
import { Component } from '@angular/core';
1
import { FormControl, FormGroup } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
myFormGroup = new FormGroup({
14
firstName: new FormControl()
15
});
16
17
onSubmit() {
18
console.log(this.myFormGroup.get("firstName"))
19
}
20
}
21
myFormGroup = new FormGroup({
firstName: new FormControl()
});
import { Component } from '@angular/core';
1
import { FormControl, FormGroup } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
14
15
16
17
onSubmit() {
18
console.log(this.myFormGroup.get("firstName"))
19
}
20
}
21
onSubmit() {
console.log(this.myFormGroup.get("firstName"))
}
import { Component } from '@angular/core';
1
import { FormControl, FormGroup } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
myFormGroup = new FormGroup({
14
firstName: new FormControl()
15
});
16
17
18
19
20
}
21
Slide 43
Slide 43 text
registerControl()
addControl()
removeControl()
setControl()
Slide 44
Slide 44 text
setValue()
patchValue()
reset()
Slide 45
Slide 45 text
getRawValue()
Slide 46
Slide 46 text
formGroup.getRawValue()
Slide 47
Slide 47 text
formGroup.getRawValue()
{
"firstName" : "Obi Wan",
"lastName" : "Kenobi"
}
1
2
3
4
Slide 48
Slide 48 text
formGroup.value
Slide 49
Slide 49 text
formGroup.value
{
"firstName" : "Obi Wan"
}
1
2
3
Slide 50
Slide 50 text
value: any
status: string
valid: boolean
invalid: boolean
pending: boolean
disabled: boolean
enabled: boolean
errors: ValidationErrors | null
pristine: boolean
dirty: boolean
touched: boolean
untouched: boolean
valueChanges: Observable
statusChanges: Observable
Slide 51
Slide 51 text
Submit
Slide 52
Slide 52 text
Submit
Also enabled in pending state!
Slide 53
Slide 53 text
Submit
Slide 54
Slide 54 text
Submit
Only enabled when valid
Slide 55
Slide 55 text
FormBuilder
Slide 56
Slide 56 text
FormBuilder
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms'
@Component({
selector: 'my-app',
template: `
Send
`
})
export class AppComponent {
myFormGroup = new FormGroup({
firstName: new FormControl()
});
onSubmit() {
console.log(this.myFormGroup.get("firstName"))
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Slide 57
Slide 57 text
import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
@Component({
selector: 'my-app',
template: `
Send
`
})
export class AppComponent {
myFormGroup: FormGroup;
constructor(private fb: FormBuilder){
this.myFormGroup = fb.group({
firstName: null
});
}
onSubmit(){
console.log(this.myFormGroup.value)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Slide 58
Slide 58 text
import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
@Component({
selector: 'my-app',
template: `
Send
`
})
export class AppComponent {
myFormGroup: FormGroup;
constructor(private fb: FormBuilder){
this.myFormGroup = fb.group({
firstName: null
});
}
onSubmit(){
console.log(this.myFormGroup.value)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
import { Component } from '@angular/core';
1
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
14
myFormGroup: FormGroup;
15
16
constructor(private fb: FormBuilder){
17
this.myFormGroup = fb.group({
18
firstName: null
19
});
20
}
21
22
onSubmit(){
23
console.log(this.myFormGroup.value)
24
}
25
}
26
Slide 59
Slide 59 text
import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
@Component({
selector: 'my-app',
template: `
Send
`
})
export class AppComponent {
myFormGroup: FormGroup;
constructor(private fb: FormBuilder){
this.myFormGroup = fb.group({
firstName: null
});
}
onSubmit(){
console.log(this.myFormGroup.value)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
import { Component } from '@angular/core';
1
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
14
myFormGroup: FormGroup;
15
16
constructor(private fb: FormBuilder){
17
this.myFormGroup = fb.group({
18
firstName: null
19
});
20
}
21
22
onSubmit(){
23
console.log(this.myFormGroup.value)
24
}
25
}
26
Send
import { Component } from '@angular/core';
1
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
9
10
`
11
})
12
export class AppComponent {
13
14
myFormGroup: FormGroup;
15
16
constructor(private fb: FormBuilder){
17
this.myFormGroup = fb.group({
18
firstName: null
19
});
20
}
21
22
onSubmit(){
23
console.log(this.myFormGroup.value)
24
}
25
}
26
Slide 60
Slide 60 text
import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
@Component({
selector: 'my-app',
template: `
Send
`
})
export class AppComponent {
myFormGroup: FormGroup;
constructor(private fb: FormBuilder){
this.myFormGroup = fb.group({
firstName: null
});
}
onSubmit(){
console.log(this.myFormGroup.value)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
import { Component } from '@angular/core';
1
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
14
myFormGroup: FormGroup;
15
16
constructor(private fb: FormBuilder){
17
this.myFormGroup = fb.group({
18
firstName: null
19
});
20
}
21
22
onSubmit(){
23
console.log(this.myFormGroup.value)
24
}
25
}
26
Send
import { Component } from '@angular/core';
1
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
9
10
`
11
})
12
export class AppComponent {
13
14
myFormGroup: FormGroup;
15
16
constructor(private fb: FormBuilder){
17
this.myFormGroup = fb.group({
18
firstName: null
19
});
20
}
21
22
onSubmit(){
23
console.log(this.myFormGroup.value)
24
}
25
}
26
constructor(private fb: FormBuilder){
import { Component } from '@angular/core';
1
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
14
myFormGroup: FormGroup;
15
16
17
this.myFormGroup = fb.group({
18
firstName: null
19
});
20
}
21
22
onSubmit(){
23
console.log(this.myFormGroup.value)
24
}
25
}
26
Slide 61
Slide 61 text
import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
@Component({
selector: 'my-app',
template: `
Send
`
})
export class AppComponent {
myFormGroup: FormGroup;
constructor(private fb: FormBuilder){
this.myFormGroup = fb.group({
firstName: null
});
}
onSubmit(){
console.log(this.myFormGroup.value)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
import { Component } from '@angular/core';
1
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
14
myFormGroup: FormGroup;
15
16
constructor(private fb: FormBuilder){
17
this.myFormGroup = fb.group({
18
firstName: null
19
});
20
}
21
22
onSubmit(){
23
console.log(this.myFormGroup.value)
24
}
25
}
26
Send
import { Component } from '@angular/core';
1
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
9
10
`
11
})
12
export class AppComponent {
13
14
myFormGroup: FormGroup;
15
16
constructor(private fb: FormBuilder){
17
this.myFormGroup = fb.group({
18
firstName: null
19
});
20
}
21
22
onSubmit(){
23
console.log(this.myFormGroup.value)
24
}
25
}
26
constructor(private fb: FormBuilder){
import { Component } from '@angular/core';
1
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
14
myFormGroup: FormGroup;
15
16
17
this.myFormGroup = fb.group({
18
firstName: null
19
});
20
}
21
22
onSubmit(){
23
console.log(this.myFormGroup.value)
24
}
25
}
26
this.myFormGroup = fb.group({
firstName: null
});
import { Component } from '@angular/core';
1
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
14
myFormGroup: FormGroup;
15
16
constructor(private fb: FormBuilder){
17
18
19
20
}
21
22
onSubmit(){
23
console.log(this.myFormGroup.value)
24
}
25
}
26
Slide 62
Slide 62 text
import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
@Component({
selector: 'my-app',
template: `
Send
`
})
export class AppComponent {
myFormGroup: FormGroup;
constructor(private fb: FormBuilder){
this.myFormGroup = fb.group({
firstName: null
});
}
onSubmit(){
console.log(this.myFormGroup.value)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
import { Component } from '@angular/core';
1
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
14
myFormGroup: FormGroup;
15
16
constructor(private fb: FormBuilder){
17
this.myFormGroup = fb.group({
18
firstName: null
19
});
20
}
21
22
onSubmit(){
23
console.log(this.myFormGroup.value)
24
}
25
}
26
Send
import { Component } from '@angular/core';
1
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
9
10
`
11
})
12
export class AppComponent {
13
14
myFormGroup: FormGroup;
15
16
constructor(private fb: FormBuilder){
17
this.myFormGroup = fb.group({
18
firstName: null
19
});
20
}
21
22
onSubmit(){
23
console.log(this.myFormGroup.value)
24
}
25
}
26
constructor(private fb: FormBuilder){
import { Component } from '@angular/core';
1
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
14
myFormGroup: FormGroup;
15
16
17
this.myFormGroup = fb.group({
18
firstName: null
19
});
20
}
21
22
onSubmit(){
23
console.log(this.myFormGroup.value)
24
}
25
}
26
this.myFormGroup = fb.group({
firstName: null
});
import { Component } from '@angular/core';
1
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
14
myFormGroup: FormGroup;
15
16
constructor(private fb: FormBuilder){
17
18
19
20
}
21
22
onSubmit(){
23
console.log(this.myFormGroup.value)
24
}
25
}
26
myFormGroup: FormGroup;
this.myFormGroup = fb.group({
firstName: null
});
import { Component } from '@angular/core';
1
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
2
3
@Component({
4
selector: 'my-app',
5
template: `
6
7
8
Send
9
10
`
11
})
12
export class AppComponent {
13
14
15
16
constructor(private fb: FormBuilder){
17
18
19
20
}
21
22
onSubmit(){
23
console.log(this.myFormGroup.value)
24
}
25
}
26
Slide 63
Slide 63 text
profileForm = new FormGroup({
firstName: new FormControl('')
lastName: new FormControl(''),
address: new FormGroup({
street: new FormControl(''),
city: new FormControl(''),
state: new FormControl(''),
zip: new FormControl('')
})
});
1
2
3
4
5
6
7
8
9
10
profileForm = this.fb.group({
firstName: [''],
lastName: [''],
address: this.fb.group({
street: [''],
city: [''],
state: [''],
zip: ['']
}),
});
1
2
3
4
5
6
7
8
9
10
Slide 64
Slide 64 text
FormControl
FormGroup
FormArray
Slide 65
Slide 65 text
FormControl
FormGroup
FormArray
Slide 66
Slide 66 text
FormArray
Array of Form controls
Slide 67
Slide 67 text
FormArray
Array of Form controls
Dynamic controls
Slide 68
Slide 68 text
FormArray
Array of Form controls
Iterating over controls
Dynamic controls
Slide 69
Slide 69 text
FormArray
Array of Form controls
Iterating over controls
Dynamic controls
Serialized as array
Slide 70
Slide 70 text
FormArray
import { Component } from "@angular/core";
import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
@Component({
selector: "my-app",
template: `
Send
`
})
export class AppComponent {
myFormGroup: FormGroup;
formArray: FormArray;
constructor(private fb: FormBuilder) {
this.formArray = fb.array([new FormControl("")])
this.myFormGroup = fb.group({
myFormArray: this.formArray
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Slide 71
Slide 71 text
FormArray
import { Component } from "@angular/core";
import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
@Component({
selector: "my-app",
template: `
Send
`
})
export class AppComponent {
myFormGroup: FormGroup;
formArray: FormArray;
constructor(private fb: FormBuilder) {
this.formArray = fb.array([new FormControl("")])
this.myFormGroup = fb.group({
myFormArray: this.formArray
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
myFormGroup: FormGroup;
formArray: FormArray;
import { Component } from "@angular/core";
1
import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
10
11
Send
12
13
`
14
})
15
export class AppComponent {
16
17
18
19
constructor(private fb: FormBuilder) {
20
this.formArray = fb.array([new FormControl("")])
21
this.myFormGroup = fb.group({
22
myFormArray: this.formArray
23
});
24
}
25
}
26
Slide 72
Slide 72 text
FormArray
import { Component } from "@angular/core";
import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
@Component({
selector: "my-app",
template: `
Send
`
})
export class AppComponent {
myFormGroup: FormGroup;
formArray: FormArray;
constructor(private fb: FormBuilder) {
this.formArray = fb.array([new FormControl("")])
this.myFormGroup = fb.group({
myFormArray: this.formArray
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
myFormGroup: FormGroup;
formArray: FormArray;
import { Component } from "@angular/core";
1
import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
10
11
Send
12
13
`
14
})
15
export class AppComponent {
16
17
18
19
constructor(private fb: FormBuilder) {
20
this.formArray = fb.array([new FormControl("")])
21
this.myFormGroup = fb.group({
22
myFormArray: this.formArray
23
});
24
}
25
}
26
this.formArray = fb.array([new FormControl("")])
import { Component } from "@angular/core";
1
import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
10
11
Send
12
13
`
14
})
15
export class AppComponent {
16
myFormGroup: FormGroup;
17
formArray: FormArray;
18
19
constructor(private fb: FormBuilder) {
20
21
this.myFormGroup = fb.group({
22
myFormArray: this.formArray
23
});
24
}
25
}
26
Slide 73
Slide 73 text
FormArray
import { Component } from "@angular/core";
import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
@Component({
selector: "my-app",
template: `
Send
`
})
export class AppComponent {
myFormGroup: FormGroup;
formArray: FormArray;
constructor(private fb: FormBuilder) {
this.formArray = fb.array([new FormControl("")])
this.myFormGroup = fb.group({
myFormArray: this.formArray
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
myFormGroup: FormGroup;
formArray: FormArray;
import { Component } from "@angular/core";
1
import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
10
11
Send
12
13
`
14
})
15
export class AppComponent {
16
17
18
19
constructor(private fb: FormBuilder) {
20
this.formArray = fb.array([new FormControl("")])
21
this.myFormGroup = fb.group({
22
myFormArray: this.formArray
23
});
24
}
25
}
26
this.formArray = fb.array([new FormControl("")])
import { Component } from "@angular/core";
1
import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
10
11
Send
12
13
`
14
})
15
export class AppComponent {
16
myFormGroup: FormGroup;
17
formArray: FormArray;
18
19
constructor(private fb: FormBuilder) {
20
21
this.myFormGroup = fb.group({
22
myFormArray: this.formArray
23
});
24
}
25
}
26
this.myFormGroup = fb.group({
myFormArray: this.formArray
});
import { Component } from "@angular/core";
1
import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
10
11
Send
12
13
`
14
})
15
export class AppComponent {
16
myFormGroup: FormGroup;
17
formArray: FormArray;
18
19
constructor(private fb: FormBuilder) {
20
this.formArray = fb.array([new FormControl("")])
21
22
23
24
}
25
}
26
Slide 74
Slide 74 text
FormArray
import { Component } from "@angular/core";
import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
@Component({
selector: "my-app",
template: `
Send
`
})
export class AppComponent {
myFormGroup: FormGroup;
formArray: FormArray;
constructor(private fb: FormBuilder) {
this.formArray = fb.array([new FormControl("")])
this.myFormGroup = fb.group({
myFormArray: this.formArray
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
myFormGroup: FormGroup;
formArray: FormArray;
import { Component } from "@angular/core";
1
import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
Send
import { Component } from "@angular/core";
1
import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
12
13
`
14
})
15
export class AppComponent {
16
myFormGroup: FormGroup;
17
formArray: FormArray;
18
19
constructor(private fb: FormBuilder) {
20
this.formArray = fb.array([new FormControl("")])
21
this.myFormGroup = fb.group({
22
myFormArray: this.formArray
23
});
24
}
25
}
26
8
10
11
Send
12
13
`
14
})
15
export class AppComponent {
16
17
18
19
constructor(private fb: FormBuilder) {
20
this.formArray = fb.array([new FormControl("")])
21
this.myFormGroup = fb.group({
22
myFormArray: this.formArray
23
});
24
}
25
}
26
this.formArray = fb.array([new FormControl("")])
import { Component } from "@angular/core";
1
import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
10
11
Send
12
13
`
14
})
15
export class AppComponent {
16
myFormGroup: FormGroup;
17
formArray: FormArray;
18
19
constructor(private fb: FormBuilder) {
20
21
this.myFormGroup = fb.group({
22
myFormArray: this.formArray
23
});
24
}
25
}
26
this.myFormGroup = fb.group({
myFormArray: this.formArray
});
import { Component } from "@angular/core";
1
import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
10
11
Send
12
13
`
14
})
15
export class AppComponent {
16
myFormGroup: FormGroup;
17
formArray: FormArray;
18
19
constructor(private fb: FormBuilder) {
20
this.formArray = fb.array([new FormControl("")])
21
22
23
24
}
25
}
26
Slide 75
Slide 75 text
FormArray
import { Component } from "@angular/core";
import { FormArray, FormBuilder } from "@angular/forms";
@Component({
selector: "my-app",
template: `
`
})
export class AppComponent {
myForm: FormGroup;
formArray: FormArray;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Slide 76
Slide 76 text
FormArray
import { Component } from "@angular/core";
import { FormArray, FormBuilder } from "@angular/forms";
@Component({
selector: "my-app",
template: `
`
})
export class AppComponent {
myForm: FormGroup;
formArray: FormArray;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
myForm: FormGroup;
formArray: FormArray;
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
15
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
21
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
22
}
23
}
24
Slide 77
Slide 77 text
FormArray
import { Component } from "@angular/core";
import { FormArray, FormBuilder } from "@angular/forms";
@Component({
selector: "my-app",
template: `
`
})
export class AppComponent {
myForm: FormGroup;
formArray: FormArray;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
myForm: FormGroup;
formArray: FormArray;
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
15
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
21
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
22
}
23
}
24
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
myForm: FormGroup;
15
formArray: FormArray;
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
21
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
22
}
23
}
24
Slide 78
Slide 78 text
FormArray
import { Component } from "@angular/core";
import { FormArray, FormBuilder } from "@angular/forms";
@Component({
selector: "my-app",
template: `
`
})
export class AppComponent {
myForm: FormGroup;
formArray: FormArray;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
myForm: FormGroup;
formArray: FormArray;
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
15
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
21
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
22
}
23
}
24
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
myForm: FormGroup;
15
formArray: FormArray;
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
21
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
22
}
23
}
24
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
myForm: FormGroup;
15
formArray: FormArray;
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
21
22
}
23
}
24
Slide 79
Slide 79 text
FormArray
import { Component } from "@angular/core";
import { FormArray, FormBuilder } from "@angular/forms";
@Component({
selector: "my-app",
template: `
`
})
export class AppComponent {
myForm: FormGroup;
formArray: FormArray;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
myForm: FormGroup;
formArray: FormArray;
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
15
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
21
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
22
}
23
}
24
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
myForm: FormGroup;
15
formArray: FormArray;
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
21
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
22
}
23
}
24
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
myForm: FormGroup;
15
formArray: FormArray;
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
21
22
}
23
}
24
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
myForm: FormGroup;
15
formArray: FormArray;
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
21
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
22
}
23
}
24
Slide 80
Slide 80 text
FormArray
import { Component } from "@angular/core";
import { FormArray, FormBuilder } from "@angular/forms";
@Component({
selector: "my-app",
template: `
`
})
export class AppComponent {
myForm: FormGroup;
formArray: FormArray;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
myForm: FormGroup;
formArray: FormArray;
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
myForm: FormGroup;
15
formArray: FormArray;
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
21
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
22
}
23
}
24
8
9
10
11
`
12
})
13
export class AppComponent {
14
15
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
21
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
22
}
23
}
24
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
myForm: FormGroup;
15
formArray: FormArray;
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
21
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
22
}
23
}
24
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
myForm: FormGroup;
15
formArray: FormArray;
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
21
22
}
23
}
24
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
myForm: FormGroup;
15
formArray: FormArray;
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
21
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
22
}
23
}
24
Slide 81
Slide 81 text
FormArray
import { Component } from "@angular/core";
import { FormArray, FormBuilder } from "@angular/forms";
@Component({
selector: "my-app",
template: `
`
})
export class AppComponent {
myForm: FormGroup;
formArray: FormArray;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
myForm: FormGroup;
formArray: FormArray;
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
myForm: FormGroup;
15
formArray: FormArray;
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
21
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
22
}
23
}
24
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
15
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
21
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
22
}
23
}
24
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
myForm: FormGroup;
15
formArray: FormArray;
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
21
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
22
}
23
}
24
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
myForm: FormGroup;
15
formArray: FormArray;
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
21
22
}
23
}
24
import { Component } from "@angular/core";
1
import { FormArray, FormBuilder } from "@angular/forms";
2
3
@Component({
4
selector: "my-app",
5
template: `
6
7
8
9
10
11
`
12
})
13
export class AppComponent {
14
myForm: FormGroup;
15
formArray: FormArray;
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
21
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
22
}
23
}
24
8
9
10
11
`
12
})
13
export class AppComponent {
14
myForm: FormGroup;
15
formArray: FormArray;
16
17
constructor(private formBuilder: FormBuilder) {}
18
19
ngOnInit() {
20
this.formArray = this.formBuilder.array([new FormGroup({ ... })])
21
this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
22
}
23
}
24
Slide 82
Slide 82 text
Validation
Slide 83
Slide 83 text
Validation
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Room } from './room';
@Component({ /* ... */ })
export class FormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: '',
lastName: '',
age: '',
room: null,
}
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Slide 84
Slide 84 text
Validation
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Room } from './room';
@Component({ /* ... */ })
export class FormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: ['', Validators.required],
lastName: ['', Validators.required],
age: ['', Validators.required],
room: [null, Validators.required],
}
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Slide 85
Slide 85 text
Validation
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Room } from './room';
@Component({ /* ... */ })
export class FormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: ['', Validators.required],
lastName: ['', Validators.required],
age: ['', Validators.required],
room: [null, Validators.required],
}
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
1
2
import { Room } from './room';
3
4
@Component({ /* ... */ })
5
export class FormComponent implements OnInit {
6
myForm: FormGroup;
7
8
constructor(private formBuilder: FormBuilder) {}
9
10
ngOnInit() {
11
this.myForm = this.formBuilder.group(
12
{
13
firstName: ['', Validators.required],
14
lastName: ['', Validators.required],
15
age: ['', Validators.required],
16
room: [null, Validators.required],
17
}
18
);
19
}
20
}
21
Slide 86
Slide 86 text
Validation
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Room } from './room';
@Component({ /* ... */ })
export class FormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: ['', Validators.required],
lastName: ['', Validators.required],
age: ['', Validators.required],
room: [null, Validators.required],
}
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
1
2
import { Room } from './room';
3
4
@Component({ /* ... */ })
5
export class FormComponent implements OnInit {
6
myForm: FormGroup;
7
8
constructor(private formBuilder: FormBuilder) {}
9
10
ngOnInit() {
11
this.myForm = this.formBuilder.group(
12
{
13
firstName: ['', Validators.required],
14
lastName: ['', Validators.required],
15
age: ['', Validators.required],
16
room: [null, Validators.required],
17
}
18
);
19
}
20
}
21
this.myForm = this.formBuilder.group(
{
firstName: ['', Validators.required],
lastName: ['', Validators.required],
age: ['', Validators.required],
room: [null, Validators.required],
}
);
import { Component, OnInit } from '@angular/core';
1
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
2
import { Room } from './room';
3
4
@Component({ /* ... */ })
5
export class FormComponent implements OnInit {
6
myForm: FormGroup;
7
8
constructor(private formBuilder: FormBuilder) {}
9
10
ngOnInit() {
11
12
13
14
15
16
17
18
19
}
20
}
21
Slide 87
Slide 87 text
Validation
class Validators {
static required(control: AbstractControl): ValidationErrors | null
}
1
2
3
4
5
6
7
8
9
10
11
12
13
Slide 88
Slide 88 text
Validation
class Validators {
static min(min: number): ValidatorFn
static max(max: number): ValidatorFn
static required(control: AbstractControl): ValidationErrors | null
static requiredTrue(control: AbstractControl): ValidationErrors | null
static email(control: AbstractControl): ValidationErrors | null
static minLength(minLength: number): ValidatorFn
static maxLength(maxLength: number): ValidatorFn
static pattern(pattern: string | RegExp): ValidatorFn
static nullValidator(control: AbstractControl): ValidationErrors | null
static compose(validators: ValidatorFn[]): ValidatorFn | null
static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn | null
}
1
2
3
4
5
6
7
8
9
10
11
12
13
Slide 89
Slide 89 text
Validation
myForm.get('controlName').errors?.min
.max
.required
.requiredTrue
.email
.minLength
.maxLength
.pattern
.nullValidator
.compose
.composeAsync
1
2
3
4
5
6
7
8
9
10
11
Slide 90
Slide 90 text
Validation
.ng-valid
.ng-invalid
.ng-pending
.ng-pristine
.ng-dirty
.ng-untouched
.ng-touched
1
2
3
4
5
6
7
8
9
10
11
12
13
Slide 91
Slide 91 text
Custom Validation
Slide 92
Slide 92 text
Custom Validation
import { AbstractControl } from '@angular/forms';
export class MyCustomValidator {
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
import { AbstractControl } from '@angular/forms';
export class MyCustomValidator {
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
Slide 93
Slide 93 text
Custom Validation
import { AbstractControl } from '@angular/forms';
export class MyCustomValidator {
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
import { AbstractControl } from '@angular/forms';
export class MyCustomValidator {
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
export class MyCustomValidator {
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
}
import { AbstractControl } from '@angular/forms';
1
2
3
4
5
6
7
8
9
10
11
12
Slide 94
Slide 94 text
Custom Validation
import { AbstractControl } from '@angular/forms';
export class MyCustomValidator {
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
import { AbstractControl } from '@angular/forms';
export class MyCustomValidator {
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
export class MyCustomValidator {
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
}
import { AbstractControl } from '@angular/forms';
1
2
3
4
5
6
7
8
9
10
11
12
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
import { AbstractControl } from '@angular/forms';
1
2
export class MyCustomValidator {
3
4
5
6
7
8
9
10
11
}
12
Slide 95
Slide 95 text
Custom Validation
import { AbstractControl } from '@angular/forms';
export class MyCustomValidator {
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
import { AbstractControl } from '@angular/forms';
export class MyCustomValidator {
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
export class MyCustomValidator {
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
}
import { AbstractControl } from '@angular/forms';
1
2
3
4
5
6
7
8
9
10
11
12
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
import { AbstractControl } from '@angular/forms';
1
2
export class MyCustomValidator {
3
4
5
6
7
8
9
10
11
}
12
static myValidator(control: AbstractControl) {
import { AbstractControl } from '@angular/forms';
1
2
export class MyCustomValidator {
3
4
5
if (control.value ... ) {
6
return { someProp: true };
7
}
8
9
return null;
10
}
11
}
12
Slide 96
Slide 96 text
Custom Validation
import { AbstractControl } from '@angular/forms';
export class MyCustomValidator {
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
import { AbstractControl } from '@angular/forms';
export class MyCustomValidator {
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
export class MyCustomValidator {
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
}
import { AbstractControl } from '@angular/forms';
1
2
3
4
5
6
7
8
9
10
11
12
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
import { AbstractControl } from '@angular/forms';
1
2
export class MyCustomValidator {
3
4
5
6
7
8
9
10
11
}
12
static myValidator(control: AbstractControl) {
import { AbstractControl } from '@angular/forms';
1
2
export class MyCustomValidator {
3
4
5
if (control.value ... ) {
6
return { someProp: true };
7
}
8
9
return null;
10
}
11
}
12
if (control.value ... ) {
return { someProp: true };
}
import { AbstractControl } from '@angular/forms';
1
2
export class MyCustomValidator {
3
4
static myValidator(control: AbstractControl) {
5
6
7
8
9
return null;
10
}
11
}
12
Slide 97
Slide 97 text
Custom Validation
import { AbstractControl } from '@angular/forms';
export class MyCustomValidator {
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
import { AbstractControl } from '@angular/forms';
export class MyCustomValidator {
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
export class MyCustomValidator {
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
}
import { AbstractControl } from '@angular/forms';
1
2
3
4
5
6
7
8
9
10
11
12
static myValidator(control: AbstractControl) {
if (control.value ... ) {
return { someProp: true };
}
return null;
}
import { AbstractControl } from '@angular/forms';
1
2
export class MyCustomValidator {
3
4
5
6
7
8
9
10
11
}
12
static myValidator(control: AbstractControl) {
import { AbstractControl } from '@angular/forms';
1
2
export class MyCustomValidator {
3
4
5
if (control.value ... ) {
6
return { someProp: true };
7
}
8
9
return null;
10
}
11
}
12
if (control.value ... ) {
return { someProp: true };
}
import { AbstractControl } from '@angular/forms';
1
2
export class MyCustomValidator {
3
4
static myValidator(control: AbstractControl) {
5
6
7
8
9
return null;
10
}
11
}
12
return null;
import { AbstractControl } from '@angular/forms';
1
2
export class MyCustomValidator {
3
4
static myValidator(control: AbstractControl) {
5
if (control.value ... ) {
6
return { someProp: true };
7
}
8
9
10
}
11
}
12
Slide 98
Slide 98 text
Custom Validation
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Room } from './room';
@Component({ /* ... */ })
export class FormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: ['', Validators.required],
lastName: ['', Validators.required],
age: ['', Validators.required],
room: [null, Validators.required],
}
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Slide 99
Slide 99 text
Custom Validation
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Room } from './room';
@Component({ /* ... */ })
export class FormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: ['', Validators.required],
lastName: ['', Validators.required],
age: ['', Validators.required],
room: [null, Validators.required],
}
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
firstName: ['', Validators.required],
lastName: ['', Validators.required],
age: ['', Validators.required],
room: [null, Validators.required],
import { Component, OnInit } from '@angular/core';
1
import { FormBuilder, FormGroup } from '@angular/forms';
2
import { Room } from './room';
3
4
@Component({ /* ... */ })
5
export class FormComponent implements OnInit {
6
myForm: FormGroup;
7
8
constructor(private formBuilder: FormBuilder) {}
9
10
ngOnInit() {
11
this.myForm = this.formBuilder.group(
12
{
13
14
15
16
17
}
18
);
19
}
20
}
21
Slide 100
Slide 100 text
Custom Validation
firstName: ['', Validators.required],
lastName: ['', [Validators.required, MyCustomValidator.myValidator]]
age: ['', Validators.required],
room: [null, Validators.required],
import { Component, OnInit } from '@angular/core';
1
import { FormBuilder, FormGroup } from '@angular/forms';
2
import { Room } from './room';
3
4
@Component({ /* ... */ })
5
export class FormComponent implements OnInit {
6
myForm: FormGroup;
7
8
constructor(private formBuilder: FormBuilder) {}
9
10
ngOnInit() {
11
this.myForm = this.formBuilder.group(
12
{
13
14
15
16
17
}
18
);
19
}
20
}
21
Slide 101
Slide 101 text
Async Validation
Slide 102
Slide 102 text
Async Validation
Slide 103
Slide 103 text
Async Validation
import { AbstractControl } from '@angular/forms';
export class MyCustomValidator {
static myAsyncValidator(control: AbstractControl)
: Observable {
// ...
}
}
1
2
3
4
5
6
7
8
9
10
import { AbstractControl } from '@angular/forms';
export class MyCustomValidator {
static myAsyncValidator(control: AbstractControl)
: Observable {
// ...
}
}
1
2
3
4
5
6
7
8
9
10
Slide 104
Slide 104 text
Async Validation
import { AbstractControl } from '@angular/forms';
export class MyCustomValidator {
static myAsyncValidator(control: AbstractControl)
: Observable {
// ...
}
}
1
2
3
4
5
6
7
8
9
10
import { AbstractControl } from '@angular/forms';
export class MyCustomValidator {
static myAsyncValidator(control: AbstractControl)
: Observable {
// ...
}
}
1
2
3
4
5
6
7
8
9
10
static myAsyncValidator(control: AbstractControl)
: Observable {
import { AbstractControl } from '@angular/forms';
1
2
export class MyCustomValidator {
3
4
5
6
// ...
7
}
8
9
}
10
Slide 105
Slide 105 text
Async Validation
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Room } from './room';
@Component({ /* ... */ })
export class FormComponent implements OnInit {
myForm: FormGroup;
rooms: Room[] = [ /* ... */ ];
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: ['', Validators.required],
lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
age: ['', Validators.required],
room: [null, Validators.required],
}
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Slide 106
Slide 106 text
Async Validation
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Room } from './room';
@Component({ /* ... */ })
export class FormComponent implements OnInit {
myForm: FormGroup;
rooms: Room[] = [ /* ... */ ];
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: ['', Validators.required],
lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
age: ['', Validators.required],
room: [null, Validators.required],
}
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
this.myForm = this.formBuilder.group(
{
firstName: ['', Validators.required],
lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
age: ['', Validators.required],
room: [null, Validators.required],
}
import { Component, OnInit } from '@angular/core';
1
import { FormBuilder, FormGroup } from '@angular/forms';
2
import { Room } from './room';
3
4
@Component({ /* ... */ })
5
export class FormComponent implements OnInit {
6
myForm: FormGroup;
7
8
rooms: Room[] = [ /* ... */ ];
9
10
constructor(private formBuilder: FormBuilder) {}
11
12
ngOnInit() {
13
14
15
16
17
18
19
20
);
21
}
22
}
23
Slide 107
Slide 107 text
Async Validation
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Room } from './room';
@Component({ /* ... */ })
export class FormComponent implements OnInit {
myForm: FormGroup;
rooms: Room[] = [ /* ... */ ];
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: ['', Validators.required],
lastName: ['', [Validators.required], [MyCustomValidator.myAsyncValidator]],
age: ['', Validators.required],
room: [null, Validators.required],
}
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Slide 108
Slide 108 text
Async Validation
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Room } from './room';
@Component({ /* ... */ })
export class FormComponent implements OnInit {
myForm: FormGroup;
rooms: Room[] = [ /* ... */ ];
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: ['', Validators.required],
lastName: ['', [Validators.required], [MyCustomValidator.myAsyncValidator]],
age: ['', Validators.required],
room: [null, Validators.required],
}
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
this.myForm = this.formBuilder.group(
{
firstName: ['', Validators.required],
lastName: ['', [Validators.required], [MyCustomValidator.myAsyncValidator]],
age: ['', Validators.required],
room: [null, Validators.required],
}
import { Component, OnInit } from '@angular/core';
1
import { FormBuilder, FormGroup } from '@angular/forms';
2
import { Room } from './room';
3
4
@Component({ /* ... */ })
5
export class FormComponent implements OnInit {
6
myForm: FormGroup;
7
8
rooms: Room[] = [ /* ... */ ];
9
10
constructor(private formBuilder: FormBuilder) {}
11
12
ngOnInit() {
13
14
15
16
17
18
19
20
);
21
}
22
}
23
Slide 109
Slide 109 text
Cross Field
Validation
Slide 110
Slide 110 text
Cross Field Validation
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Room } from './room';
@Component({ /* ... */ })
export class FormComponent implements OnInit {
myForm: FormGroup;
rooms: Room[] = [ /* ... */ ];
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: ['', Validators.required],
lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
age: ['', Validators.required],
room: [null, Validators.required],
}
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Slide 111
Slide 111 text
Cross Field Validation
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Room } from './room';
@Component({ /* ... */ })
export class FormComponent implements OnInit {
myForm: FormGroup;
rooms: Room[] = [ /* ... */ ];
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: ['', Validators.required],
lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
age: ['', Validators.required],
room: [null, Validators.required],
}
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
import { Component, OnInit } from '@angular/core';
1
import { FormBuilder, FormGroup } from '@angular/forms';
2
import { Room } from './room';
3
4
@Component({ /* ... */ })
5
export class FormComponent implements OnInit {
6
myForm: FormGroup;
7
8
rooms: Room[] = [ /* ... */ ];
9
10
constructor(private formBuilder: FormBuilder) {}
11
12
ngOnInit() {
13
this.myForm = this.formBuilder.group(
14
{
15
firstName: ['', Validators.required],
16
17
age: ['', Validators.required],
18
room: [null, Validators.required],
19
}
20
);
21
}
22
}
23
Slide 112
Slide 112 text
Cross Field Validation
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Room } from './room';
@Component({ /* ... */ })
export class FormComponent implements OnInit {
myForm: FormGroup;
rooms: Room[] = [ /* ... */ ];
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: ['', Validators.required],
lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
age: ['', Validators.required],
room: [null, Validators.required],
},
{
validators: [...],
}
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Slide 113
Slide 113 text
Cross Field Validation
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Room } from './room';
@Component({ /* ... */ })
export class FormComponent implements OnInit {
myForm: FormGroup;
rooms: Room[] = [ /* ... */ ];
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: ['', Validators.required],
lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
age: ['', Validators.required],
room: [null, Validators.required],
},
{
validators: [...],
}
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
validators: [...],
}
import { Component, OnInit } from '@angular/core';
1
import { FormBuilder, FormGroup } from '@angular/forms';
2
import { Room } from './room';
3
4
@Component({ /* ... */ })
5
export class FormComponent implements OnInit {
6
myForm: FormGroup;
7
8
rooms: Room[] = [ /* ... */ ];
9
10
constructor(private formBuilder: FormBuilder) {}
11
12
ngOnInit() {
13
this.myForm = this.formBuilder.group(
14
{
15
firstName: ['', Validators.required],
16
lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
17
age: ['', Validators.required],
18
room: [null, Validators.required],
19
},
20
21
22
23
);
24
}
25
}
26
Slide 114
Slide 114 text
Cross Field Validation
import { FormGroup, ValidatorFn } from '@angular/forms';
export class MyFormValidator {
static formValidator(/* ... */): ValidatorFn {
return (formGroup: AbstractControl) => {
// return null if everything is okay
// otherwise an object
};
}
}
1
2
3
4
5
6
7
8
9
10
Slide 115
Slide 115 text
Cross Field Validation
import { FormGroup, ValidatorFn } from '@angular/forms';
export class MyFormValidator {
static formValidator(/* ... */): ValidatorFn {
return (formGroup: AbstractControl) => {
// return null if everything is okay
// otherwise an object
};
}
}
1
2
3
4
5
6
7
8
9
10
export class MyFormValidator {
}
import { FormGroup, ValidatorFn } from '@angular/forms';
1
2
3
static formValidator(/* ... */): ValidatorFn {
4
return (formGroup: AbstractControl) => {
5
// return null if everything is okay
6
// otherwise an object
7
};
8
}
9
10
Slide 116
Slide 116 text
Cross Field Validation
import { FormGroup, ValidatorFn } from '@angular/forms';
export class MyFormValidator {
static formValidator(/* ... */): ValidatorFn {
return (formGroup: AbstractControl) => {
// return null if everything is okay
// otherwise an object
};
}
}
1
2
3
4
5
6
7
8
9
10
export class MyFormValidator {
}
import { FormGroup, ValidatorFn } from '@angular/forms';
1
2
3
static formValidator(/* ... */): ValidatorFn {
4
return (formGroup: AbstractControl) => {
5
// return null if everything is okay
6
// otherwise an object
7
};
8
}
9
10
static formValidator(/* ... */): ValidatorFn {
}
import { FormGroup, ValidatorFn } from '@angular/forms';
1
2
export class MyFormValidator {
3
4
return (formGroup: AbstractControl) => {
5
// return null if everything is okay
6
// otherwise an object
7
};
8
9
}
10
Slide 117
Slide 117 text
Cross Field Validation
import { FormGroup, ValidatorFn } from '@angular/forms';
export class MyFormValidator {
static formValidator(/* ... */): ValidatorFn {
return (formGroup: AbstractControl) => {
// return null if everything is okay
// otherwise an object
};
}
}
1
2
3
4
5
6
7
8
9
10
export class MyFormValidator {
}
import { FormGroup, ValidatorFn } from '@angular/forms';
1
2
3
static formValidator(/* ... */): ValidatorFn {
4
return (formGroup: AbstractControl) => {
5
// return null if everything is okay
6
// otherwise an object
7
};
8
}
9
10
static formValidator(/* ... */): ValidatorFn {
}
import { FormGroup, ValidatorFn } from '@angular/forms';
1
2
export class MyFormValidator {
3
4
return (formGroup: AbstractControl) => {
5
// return null if everything is okay
6
// otherwise an object
7
};
8
9
}
10
return (formGroup: AbstractControl) => {
};
import { FormGroup, ValidatorFn } from '@angular/forms';
1
2
export class MyFormValidator {
3
static formValidator(/* ... */): ValidatorFn {
4
5
// return null if everything is okay
6
// otherwise an object
7
8
}
9
}
10
Slide 118
Slide 118 text
Cross Field Validation
import { FormGroup, ValidatorFn } from '@angular/forms';
export class MyFormValidator {
static formValidator(value: any): ValidatorFn {
return (formGroup: AbstractControl) => {
// return null if everything is okay
// otherwise an object
};
}
}
1
2
3
4
5
6
7
8
9
10
Slide 119
Slide 119 text
Cross Field Validation
import { FormGroup, ValidatorFn } from '@angular/forms';
export class MyFormValidator {
static formValidator(value: any): ValidatorFn {
return (formGroup: AbstractControl) => {
// return null if everything is okay
// otherwise an object
};
}
}
1
2
3
4
5
6
7
8
9
10
static formValidator(value: any): ValidatorFn {
import { FormGroup, ValidatorFn } from '@angular/forms';
1
2
export class MyFormValidator {
3
4
return (formGroup: AbstractControl) => {
5
// return null if everything is okay
6
// otherwise an object
7
};
8
}
9
}
10
Slide 120
Slide 120 text
Cross Field Validation
import { FormGroup, ValidatorFn } from '@angular/forms';
import { Room } from './room';
export class MyFormValidator {
static formValidator(value: any): ValidatorFn {
return (formGroup: FormGroup) => {
const control1 = formGroup.get('control1Name');
const control2 = formGroup.get('control2Name');
if(/* ... */) {
// ...
}
return null;
};
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Slide 121
Slide 121 text
Cross Field Validation
import { FormGroup, ValidatorFn } from '@angular/forms';
import { Room } from './room';
export class MyFormValidator {
static formValidator(value: any): ValidatorFn {
return (formGroup: FormGroup) => {
const control1 = formGroup.get('control1Name');
const control2 = formGroup.get('control2Name');
if(/* ... */) {
// ...
}
return null;
};
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const control1 = formGroup.get('control1Name');
const control2 = formGroup.get('control2Name');
import { FormGroup, ValidatorFn } from '@angular/forms';
1
import { Room } from './room';
2
3
export class MyFormValidator {
4
static formValidator(value: any): ValidatorFn {
5
return (formGroup: FormGroup) => {
6
7
8
9
if(/* ... */) {
10
// ...
11
}
12
13
return null;
14
};
15
}
16
}
17
Slide 122
Slide 122 text
Cross Field Validation
import { FormGroup, ValidatorFn } from '@angular/forms';
import { Room } from './room';
export class MyFormValidator {
static formValidator(value: any): ValidatorFn {
return (formGroup: FormGroup) => {
const control1 = formGroup.get('control1Name');
const control2 = formGroup.get('control2Name');
if(/* ... */) {
// ...
}
return null;
};
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const control1 = formGroup.get('control1Name');
const control2 = formGroup.get('control2Name');
import { FormGroup, ValidatorFn } from '@angular/forms';
1
import { Room } from './room';
2
3
export class MyFormValidator {
4
static formValidator(value: any): ValidatorFn {
5
return (formGroup: FormGroup) => {
6
7
8
9
if(/* ... */) {
10
// ...
11
}
12
13
return null;
14
};
15
}
16
}
17
if(/* ... */) {
// ...
}
return null;
import { FormGroup, ValidatorFn } from '@angular/forms';
1
import { Room } from './room';
2
3
export class MyFormValidator {
4
static formValidator(value: any): ValidatorFn {
5
return (formGroup: FormGroup) => {
6
const control1 = formGroup.get('control1Name');
7
const control2 = formGroup.get('control2Name');
8
9
10
11
12
13
14
};
15
}
16
}
17
Slide 123
Slide 123 text
Testing
Slide 124
Slide 124 text
Testing
import { FormControl, ValidatorFn } from '@angular/forms';
describe('MyValidator', () => {
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Slide 125
Slide 125 text
Testing
import { FormControl, ValidatorFn } from '@angular/forms';
describe('MyValidator', () => {
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
describe('MyValidator', () => {
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Slide 126
Slide 126 text
Testing
import { FormControl, ValidatorFn } from '@angular/forms';
describe('MyValidator', () => {
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
describe('MyValidator', () => {
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
4
5
6
7
8
9
10
11
12
13
});
14
Slide 127
Slide 127 text
Testing
import { FormControl, ValidatorFn } from '@angular/forms';
describe('MyValidator', () => {
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
describe('MyValidator', () => {
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
4
5
6
7
8
9
10
11
12
13
});
14
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
describe('should return valid if', () => {
4
5
6
7
8
9
10
11
12
});
13
});
14
Slide 128
Slide 128 text
Testing
import { FormControl, ValidatorFn } from '@angular/forms';
describe('MyValidator', () => {
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
describe('MyValidator', () => {
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
4
5
6
7
8
9
10
11
12
13
});
14
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
describe('should return valid if', () => {
4
5
6
7
8
9
10
11
12
});
13
});
14
const formControl = new FormControl('');
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
describe('should return valid if', () => {
4
5
it('value is empty', () => {
6
7
formControl.value = '';
8
const result = MyCustomValidator.myValidator(formControl);
9
expect(result.ageNotValid).toBe(true);
10
});
11
12
});
13
});
14
Slide 129
Slide 129 text
Testing
import { FormControl, ValidatorFn } from '@angular/forms';
describe('MyValidator', () => {
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
describe('MyValidator', () => {
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
4
5
6
7
8
9
10
11
12
13
});
14
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
describe('should return valid if', () => {
4
5
6
7
8
9
10
11
12
});
13
});
14
const formControl = new FormControl('');
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
describe('should return valid if', () => {
4
5
it('value is empty', () => {
6
7
formControl.value = '';
8
const result = MyCustomValidator.myValidator(formControl);
9
expect(result.ageNotValid).toBe(true);
10
});
11
12
});
13
});
14
formControl.value = '';
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
describe('should return valid if', () => {
4
5
it('value is empty', () => {
6
const formControl = new FormControl('');
7
8
const result = MyCustomValidator.myValidator(formControl);
9
expect(result.ageNotValid).toBe(true);
10
});
11
12
});
13
});
14
Slide 130
Slide 130 text
Testing
import { FormControl, ValidatorFn } from '@angular/forms';
describe('MyValidator', () => {
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
describe('MyValidator', () => {
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
4
5
6
7
8
9
10
11
12
13
});
14
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
describe('should return valid if', () => {
4
5
6
7
8
9
10
11
12
});
13
});
14
const formControl = new FormControl('');
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
describe('should return valid if', () => {
4
5
it('value is empty', () => {
6
7
formControl.value = '';
8
const result = MyCustomValidator.myValidator(formControl);
9
expect(result.ageNotValid).toBe(true);
10
});
11
12
});
13
});
14
formControl.value = '';
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
describe('should return valid if', () => {
4
5
it('value is empty', () => {
6
const formControl = new FormControl('');
7
8
const result = MyCustomValidator.myValidator(formControl);
9
expect(result.ageNotValid).toBe(true);
10
});
11
12
});
13
});
14
const result = MyCustomValidator.myValidator(formControl);
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
describe('should return valid if', () => {
4
5
it('value is empty', () => {
6
const formControl = new FormControl('');
7
formControl.value = '';
8
9
expect(result.ageNotValid).toBe(true);
10
});
11
12
});
13
});
14
Slide 131
Slide 131 text
Testing
import { FormControl, ValidatorFn } from '@angular/forms';
describe('MyValidator', () => {
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
describe('MyValidator', () => {
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
describe('should return valid if', () => {
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
4
5
6
7
8
9
10
11
12
13
});
14
it('value is empty', () => {
const formControl = new FormControl('');
formControl.value = '';
const result = MyCustomValidator.myValidator(formControl);
expect(result.ageNotValid).toBe(true);
});
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
describe('should return valid if', () => {
4
5
6
7
8
9
10
11
12
});
13
});
14
const formControl = new FormControl('');
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
describe('should return valid if', () => {
4
5
it('value is empty', () => {
6
7
formControl.value = '';
8
const result = MyCustomValidator.myValidator(formControl);
9
expect(result.ageNotValid).toBe(true);
10
});
11
12
});
13
});
14
formControl.value = '';
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
describe('should return valid if', () => {
4
5
it('value is empty', () => {
6
const formControl = new FormControl('');
7
8
const result = MyCustomValidator.myValidator(formControl);
9
expect(result.ageNotValid).toBe(true);
10
});
11
12
});
13
});
14
const result = MyCustomValidator.myValidator(formControl);
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
describe('should return valid if', () => {
4
5
it('value is empty', () => {
6
const formControl = new FormControl('');
7
formControl.value = '';
8
9
expect(result.ageNotValid).toBe(true);
10
});
11
12
});
13
});
14
expect(result.ageNotValid).toBe(true);
import { FormControl, ValidatorFn } from '@angular/forms';
1
2
describe('MyValidator', () => {
3
describe('should return valid if', () => {
4
5
it('value is empty', () => {
6
const formControl = new FormControl('');
7
formControl.value = '';
8
const result = MyCustomValidator.myValidator(formControl);
9
10
});
11
12
});
13
});
14
Slide 132
Slide 132 text
Testing
import { FormControl, FormGroup } from '@angular/forms';
import { RestrictAgeValidator } from './restrict-age.validator';
describe('RestrictAgeValidator', () => {
describe('restricts age correctly', () => {
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
it('should return null when given age is above the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Slide 133
Slide 133 text
Testing
import { FormControl, FormGroup } from '@angular/forms';
import { RestrictAgeValidator } from './restrict-age.validator';
describe('RestrictAgeValidator', () => {
describe('restricts age correctly', () => {
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
it('should return null when given age is above the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
6
7
8
9
10
11
12
13
14
15
16
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
21
const formGroup = new FormGroup({
22
Slide 134
Slide 134 text
Testing
import { FormControl, FormGroup } from '@angular/forms';
import { RestrictAgeValidator } from './restrict-age.validator';
describe('RestrictAgeValidator', () => {
describe('restricts age correctly', () => {
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
it('should return null when given age is above the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
6
7
8
9
10
11
12
13
14
15
16
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
Slide 135
Slide 135 text
Testing
import { FormControl, FormGroup } from '@angular/forms';
import { RestrictAgeValidator } from './restrict-age.validator';
describe('RestrictAgeValidator', () => {
describe('restricts age correctly', () => {
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
it('should return null when given age is above the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
6
7
8
9
10
11
12
13
14
15
16
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
9
10
11
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
21
Slide 136
Slide 136 text
Testing
import { FormControl, FormGroup } from '@angular/forms';
import { RestrictAgeValidator } from './restrict-age.validator';
describe('RestrictAgeValidator', () => {
describe('restricts age correctly', () => {
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
it('should return null when given age is above the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
6
7
8
9
10
11
12
13
14
15
16
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
9
10
11
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const result = validatorFn(formGroup);
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
21
const formGroup = new FormGroup({
22
age: new FormControl(20),
23
room: new FormControl({ text: 'room 2', value: 'room-2' }),
24
});
25
Slide 137
Slide 137 text
Testing
import { FormControl, FormGroup } from '@angular/forms';
import { RestrictAgeValidator } from './restrict-age.validator';
describe('RestrictAgeValidator', () => {
describe('restricts age correctly', () => {
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
it('should return null when given age is above the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
6
7
8
9
10
11
12
13
14
15
16
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
9
10
11
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const result = validatorFn(formGroup);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
expect(result).not.toEqual(null);
describe( restricts age correctly , () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
21
const formGroup = new FormGroup({
22
age: new FormControl(20),
23
room: new FormControl({ text: 'room 2', value: 'room-2' }),
24
});
25
26
const result validatorFn(formGroup);
27
Slide 138
Slide 138 text
Testing
import { FormControl, FormGroup } from '@angular/forms';
import { RestrictAgeValidator } from './restrict-age.validator';
describe('RestrictAgeValidator', () => {
describe('restricts age correctly', () => {
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
it('should return null when given age is above the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
6
7
8
9
10
11
12
13
14
15
16
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
9
10
11
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const result = validatorFn(formGroup);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
expect(result).not.toEqual(null);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
it('should return null when given age is above the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
const formGroup = new FormGroup({
age: new FormControl(20),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).toEqual(null);
});
});
({ , }),
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
});
32
Slide 139
Slide 139 text
Testing
import { FormControl, FormGroup } from '@angular/forms';
import { RestrictAgeValidator } from './restrict-age.validator';
describe('RestrictAgeValidator', () => {
describe('restricts age correctly', () => {
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
it('should return null when given age is above the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
6
7
8
9
10
11
12
13
14
15
16
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
9
10
11
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const result = validatorFn(formGroup);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
expect(result).not.toEqual(null);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
it('should return null when given age is above the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
19
20
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
20
21
const formGroup = new FormGroup({
22
age: new FormControl(20),
23
room: new FormControl({ text: 'room 2', value: 'room-2' }),
24
});
25
26
const result = validatorFn(formGroup);
27
28
expect(result).toEqual(null);
29
});
30
Slide 140
Slide 140 text
Testing
import { FormControl, FormGroup } from '@angular/forms';
import { RestrictAgeValidator } from './restrict-age.validator';
describe('RestrictAgeValidator', () => {
describe('restricts age correctly', () => {
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
it('should return null when given age is above the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
6
7
8
9
10
11
12
13
14
15
16
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
9
10
11
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const result = validatorFn(formGroup);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
expect(result).not.toEqual(null);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
it('should return null when given age is above the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
19
20 const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
20
const formGroup = new FormGroup({
age: new FormControl(20),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
({ , }),
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
21
22
23
24
25
26
const result = validatorFn(formGroup);
27
28
expect(result).toEqual(null);
29
});
30
});
31
});
32
Slide 141
Slide 141 text
Testing
import { FormControl, FormGroup } from '@angular/forms';
import { RestrictAgeValidator } from './restrict-age.validator';
describe('RestrictAgeValidator', () => {
describe('restricts age correctly', () => {
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
it('should return null when given age is above the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
it('should not return null when given age is under the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
const result = validatorFn(formGroup);
expect(result).not.toEqual(null);
});
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
6
7
8
9
10
11
12
13
14
15
16
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const formGroup = new FormGroup({
age: new FormControl(9),
room: new FormControl({ text: 'room 2', value: 'room-2' }),
});
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
9
10
11
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const result = validatorFn(formGroup);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
expect(result).not.toEqual(null);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
it('should return null when given age is above the required age', () => {
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
19
20 const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
20
import { FormControl, FormGroup } from '@angular/forms';
1
import { RestrictAgeValidator } from './restrict-age.validator';
2
3
describe('RestrictAgeValidator', () => {
4
describe('restricts age correctly', () => {
5
it('should not return null when given age is under the required age', () => {
6
const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
7
8
const formGroup = new FormGroup({
9
age: new FormControl(9),
10
room: new FormControl({ text: 'room 2', value: 'room-2' }),
11
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
const result = validatorFn(formGroup);
expect(result).toEqual(null);
({ , }),
});
12
13
const result = validatorFn(formGroup);
14
15
expect(result).not.toEqual(null);
16
});
17
18
it('should return null when given age is above the required age', () => {
19
const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
20
21
const formGroup = new FormGroup({
22
age: new FormControl(20),
23
room: new FormControl({ text: 'room 2', value: 'room-2' }),
24
});
25
26
27
28
29
});
30
});
31
});
32
Slide 142
Slide 142 text
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: ...,
lastName: ...,
...
},
{
...
}
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ValueChanges
Slide 143
Slide 143 text
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: ...,
lastName: ...,
...
},
{
...
}
);
this.myForm.valueChanges.subscribe(console.log);
this.myForm.get('firstName').valueChanges.subscribe(console.log);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ValueChanges
Slide 144
Slide 144 text
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: ...,
lastName: ...,
...
},
{
...
}
);
this.myForm.valueChanges.subscribe(console.log);
this.myForm.get('firstName').valueChanges.subscribe(console.log);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
this.myForm.valueChanges.subscribe(console.log);
ngOnInit() {
1
this.myForm = this.formBuilder.group(
2
{
3
firstName: ...,
4
lastName: ...,
5
...
6
},
7
{
8
...
9
}
10
);
11
12
13
this.myForm.get('firstName').valueChanges.subscribe(console.log);
14
}
15
ValueChanges
Slide 145
Slide 145 text
ngOnInit() {
this.myForm = this.formBuilder.group(
{
firstName: ...,
lastName: ...,
...
},
{
...
}
);
this.myForm.valueChanges.subscribe(console.log);
this.myForm.get('firstName').valueChanges.subscribe(console.log);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
this.myForm.valueChanges.subscribe(console.log);
ngOnInit() {
1
this.myForm = this.formBuilder.group(
2
{
3
firstName: ...,
4
lastName: ...,
5
...
6
},
7
{
8
...
9
}
10
);
11
12
13
this.myForm.get('firstName').valueChanges.subscribe(console.log);
14
}
15
this.myForm.get('firstName').valueChanges.subscribe(console.log);
ngOnInit() {
1
this.myForm = this.formBuilder.group(
2
{
3
firstName: ...,
4
lastName: ...,
5
...
6
},
7
{
8
...
9
}
10
);
11
12
this.myForm.valueChanges.subscribe(console.log);
13
14
}
15
ValueChanges
Slide 146
Slide 146 text
Custom Form
Controls
Slide 147
Slide 147 text
Custom Form Controls
1
2
3
4
5
Slide 148
Slide 148 text
Control Value
Accessor
Slide 149
Slide 149 text
Control Value Accessor
import { Component } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
@Component({ /* ... */ })
export class MyComponent implements ControlValueAccessor {
writeValue(obj: any): void {
// ...
}
registerOnChange(fn: any): void {
// ...
}
registerOnTouched(fn: any): void {
// ...
}
setDisabledState?(isDisabled: boolean): void {
// ...
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Slide 150
Slide 150 text
Control Value Accessor
import { Component } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my.component.html',
styleUrls: ['./my.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MyComponent),
multi: true,
},
],
})
export class MyComponent implements ControlValueAccessor {
//...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Slide 151
Slide 151 text
Control Value Accessor
import { Component } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my.component.html',
styleUrls: ['./my.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MyComponent),
multi: true,
},
],
})
export class MyComponent implements ControlValueAccessor {
//...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MyComponent),
multi: true,
},
],
import { Component } from '@angular/core';
1
import { ControlValueAccessor } from '@angular/forms';
2
3
@Component({
4
selector: 'app-my-component',
5
templateUrl: './my.component.html',
6
styleUrls: ['./my.component.scss'],
7
8
9
10
11
12
13
14
})
15
export class MyComponent implements ControlValueAccessor {
16
17
//...
18
19
}
20
Slide 152
Slide 152 text
Recap
FormGroup vs FormControl vs FormArray
FormBuilder
Validation
Testing
ValueChanges (rich API)
Custom Form Controls
Slide 153
Slide 153 text
Stay safe!