-
Notifications
You must be signed in to change notification settings - Fork 0
/
form-events.ts
161 lines (151 loc) · 4.53 KB
/
form-events.ts
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
import { Signal } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import {
AbstractControl,
ControlEvent,
FormControlStatus,
PristineChangeEvent,
StatusChangeEvent,
TouchedChangeEvent,
ValueChangeEvent,
} from '@angular/forms';
import {
Observable,
combineLatest,
distinctUntilChanged,
filter,
map,
startWith, defer,
} from 'rxjs';
function valueEvents$<T>(form: AbstractControl<T>) {
return form.events.pipe(
filter(
(event: ControlEvent): event is ValueChangeEvent<typeof form.value> =>
event instanceof ValueChangeEvent,
),
);
}
function statusEvents$<T>(form: AbstractControl<T>) {
return form.events.pipe(
filter(
(event: ControlEvent): event is StatusChangeEvent =>
event instanceof StatusChangeEvent,
),
);
}
function touchedEvents$<T>(form: AbstractControl<T>) {
return form.events.pipe(
filter(
(event: ControlEvent): event is TouchedChangeEvent =>
event instanceof TouchedChangeEvent,
),
);
}
function pristineEvents$<T>(form: AbstractControl<T>) {
return form.events.pipe(
filter(
(event: ControlEvent): event is PristineChangeEvent =>
event instanceof PristineChangeEvent,
),
);
}
function isValueEvent<T>(
event: ControlEvent | T,
): event is ValueChangeEvent<T> {
return event instanceof ValueChangeEvent;
}
function isStatusEvent<T>(event: ControlEvent | T): event is StatusChangeEvent {
return event instanceof StatusChangeEvent;
}
function isPristineEvent<T>(
event: ControlEvent | T,
): event is PristineChangeEvent {
return event instanceof PristineChangeEvent;
}
function isTouchedEvent<T>(
event: ControlEvent | T,
): event is TouchedChangeEvent {
return event instanceof TouchedChangeEvent;
}
// Disclaimer: T is most often inferred as Partial<T> in practice due to a limitation of form typing
// See more, and how in the future this utility could be enhanced further :0
// https://github.com/ngxtension/ngxtension-platform/pull/391#issuecomment-2163512231
type FormEventData<T> = {
// These values are possible in Angular 16, see links at the bottom
value: T;
status: FormControlStatus;
valid: boolean;
invalid: boolean;
pending: boolean;
// These values are possible as of Angular 18
touched: boolean;
pristine: boolean;
dirty: boolean;
untouched: boolean;
};
export function allEventsObservable<T>(
form: AbstractControl<T>,
): Observable<FormEventData<T>> {
// https://fullstackbuff.dev/stories/defer-form-value-changes
return defer(() => combineLatest([
valueEvents$(form).pipe(
startWith(form.value),
map((value) => (isValueEvent(value) ? value.value : value)),
distinctUntilChanged(
(previous, current) =>
JSON.stringify(previous) === JSON.stringify(current),
),
),
statusEvents$(form).pipe(startWith(form.status)),
touchedEvents$(form).pipe(startWith(form.touched)),
pristineEvents$(form).pipe(startWith(form.pristine)),
]).pipe(
map(([valueParam, statusParam, touchedParam, pristineParam]) => {
// Original values (plus value)
const stat: FormControlStatus | StatusChangeEvent = isStatusEvent(statusParam)
? statusParam.status
: statusParam;
const touch: boolean | TouchedChangeEvent = isTouchedEvent(touchedParam)
? touchedParam.touched
: touchedParam;
const prist: boolean | PristineChangeEvent = isPristineEvent(pristineParam)
? pristineParam.pristine
: pristineParam;
// Derived values - not directly named as events,
// but are aliases for something that can be derived from original values
const validDerived = stat === 'VALID';
const invalidDerived = stat === 'INVALID';
const pendingDerived = stat === 'PENDING';
const dirtyDerived = !prist;
const untouchedDerived = !touch;
return {
value: valueParam,
status: stat,
touched: touch,
pristine: prist,
valid: validDerived,
invalid: invalidDerived,
pending: pendingDerived,
dirty: dirtyDerived,
untouched: untouchedDerived,
};
}),
))
}
export function allEventsSignal<T>(
form: AbstractControl<T>,
): Signal<FormEventData<T>> {
return toSignal(allEventsObservable(form), {
initialValue: {
value: form.value,
status: form.status,
pristine: form.pristine,
touched: form.touched,
valid: form.valid,
invalid: form.invalid,
pending: form.pending,
dirty: form.dirty,
untouched: form.untouched,
},
});
}