@tanstack/angular-form 0.23.2 → 0.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm2022/tanstack-field.directive.mjs +2 -7
- package/dist/fesm2022/tanstack-angular-form.mjs +1 -6
- package/dist/fesm2022/tanstack-angular-form.mjs.map +1 -1
- package/dist/tanstack-field.directive.d.ts +1 -3
- package/package.json +2 -2
- package/src/tanstack-field.directive.ts +0 -2
- package/src/test-setup.ts +0 -13
- package/src/tests/test.component.spec.ts +0 -358
- package/src/tests/utils.ts +0 -5
|
@@ -9,7 +9,6 @@ export class TanStackField {
|
|
|
9
9
|
defaultValue;
|
|
10
10
|
asyncDebounceMs;
|
|
11
11
|
asyncAlways;
|
|
12
|
-
preserveValue;
|
|
13
12
|
validatorAdapter;
|
|
14
13
|
tanstackField;
|
|
15
14
|
validators;
|
|
@@ -20,7 +19,6 @@ export class TanStackField {
|
|
|
20
19
|
defaultValue: this.defaultValue,
|
|
21
20
|
asyncDebounceMs: this.asyncDebounceMs,
|
|
22
21
|
asyncAlways: this.asyncAlways,
|
|
23
|
-
preserveValue: this.preserveValue,
|
|
24
22
|
validatorAdapter: this.validatorAdapter,
|
|
25
23
|
validators: this.validators,
|
|
26
24
|
defaultMeta: this.defaultMeta,
|
|
@@ -43,7 +41,7 @@ export class TanStackField {
|
|
|
43
41
|
api.update(this.getOptions());
|
|
44
42
|
}
|
|
45
43
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TanStackField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
46
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: TanStackField, isStandalone: true, selector: "[tanstackField]", inputs: { name: "name", defaultValue: "defaultValue", asyncDebounceMs: ["asyncDebounceMs", "asyncDebounceMs", numberAttribute], asyncAlways: ["asyncAlways", "asyncAlways", booleanAttribute],
|
|
44
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: TanStackField, isStandalone: true, selector: "[tanstackField]", inputs: { name: "name", defaultValue: "defaultValue", asyncDebounceMs: ["asyncDebounceMs", "asyncDebounceMs", numberAttribute], asyncAlways: ["asyncAlways", "asyncAlways", booleanAttribute], validatorAdapter: "validatorAdapter", tanstackField: "tanstackField", validators: "validators", defaultMeta: "defaultMeta" }, exportAs: ["field"], usesOnChanges: true, ngImport: i0 });
|
|
47
45
|
}
|
|
48
46
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TanStackField, decorators: [{
|
|
49
47
|
type: Directive,
|
|
@@ -63,9 +61,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
63
61
|
}], asyncAlways: [{
|
|
64
62
|
type: Input,
|
|
65
63
|
args: [{ transform: booleanAttribute }]
|
|
66
|
-
}], preserveValue: [{
|
|
67
|
-
type: Input,
|
|
68
|
-
args: [{ transform: booleanAttribute }]
|
|
69
64
|
}], validatorAdapter: [{
|
|
70
65
|
type: Input
|
|
71
66
|
}], tanstackField: [{
|
|
@@ -76,4 +71,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
76
71
|
}], defaultMeta: [{
|
|
77
72
|
type: Input
|
|
78
73
|
}] } });
|
|
79
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
74
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFuc3RhY2stZmllbGQuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3RhbnN0YWNrLWZpZWxkLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFJTCxnQkFBZ0IsRUFDaEIsZUFBZSxHQUNoQixNQUFNLGVBQWUsQ0FBQTtBQUN0QixPQUFPLEVBR0wsUUFBUSxHQU9ULE1BQU0scUJBQXFCLENBQUE7O0FBTzVCLE1BQU0sT0FBTyxhQUFhO0lBaUJHLElBQUksQ0FBUTtJQUN2QyxtRkFBbUY7SUFDbkYsd0VBQXdFO0lBQ3hFLGdEQUFnRDtJQUN2QyxZQUFZLENBQXFCO0lBQ0gsZUFBZSxDQUFTO0lBQ3ZCLFdBQVcsQ0FBVTtJQUNwRCxnQkFBZ0IsQ0FBa0I7SUFDaEIsYUFBYSxDQUd2QztJQUNRLFVBQVUsQ0FFbEI7SUFDUSxXQUFXLENBQXFCO0lBRXpDLEdBQUcsQ0FBdUU7SUFFbEUsVUFBVTtRQUNoQixPQUFPO1lBQ0wsWUFBWSxFQUFFLElBQUksQ0FBQyxZQUFZO1lBQy9CLGVBQWUsRUFBRSxJQUFJLENBQUMsZUFBZTtZQUNyQyxXQUFXLEVBQUUsSUFBSSxDQUFDLFdBQVc7WUFDN0IsZ0JBQWdCLEVBQUUsSUFBSSxDQUFDLGdCQUFnQjtZQUN2QyxVQUFVLEVBQUUsSUFBSSxDQUFDLFVBQVU7WUFDM0IsV0FBVyxFQUFFLElBQUksQ0FBQyxXQUFXO1lBQzdCLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSTtZQUNmLElBQUksRUFBRSxJQUFJLENBQUMsYUFBYTtTQUN6QixDQUFBO0lBQ0gsQ0FBQztJQUVELE9BQU8sQ0FBYTtJQUVwQixRQUFRO1FBQ04sSUFBSSxDQUFDLEdBQUcsR0FBRyxJQUFJLFFBQVEsQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUMsQ0FBQTtRQUUxQyxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxFQUFFLENBQUE7SUFDakMsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQTtJQUNsQixDQUFDO0lBRUQsV0FBVztRQUNULE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxHQUFrQyxDQUFBO1FBQ25ELElBQUksQ0FBQyxHQUFHO1lBQUUsT0FBTTtRQUNoQixHQUFHLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQyxDQUFBO0lBQy9CLENBQUM7dUdBakVVLGFBQWE7MkZBQWIsYUFBYSxpS0FzQkosZUFBZSwrQ0FDZixnQkFBZ0I7OzJGQXZCekIsYUFBYTtrQkFMekIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsaUJBQWlCO29CQUMzQixVQUFVLEVBQUUsSUFBSTtvQkFDaEIsUUFBUSxFQUFFLE9BQU87aUJBQ2xCOzhCQWtCNEIsSUFBSTtzQkFBOUIsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBSWhCLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ2lDLGVBQWU7c0JBQXJELEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFFO2dCQUNHLFdBQVc7c0JBQWxELEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUU7Z0JBQzdCLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDcUIsYUFBYTtzQkFBdkMsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBSWhCLFVBQVU7c0JBQWxCLEtBQUs7Z0JBR0csV0FBVztzQkFBbkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIERpcmVjdGl2ZSxcbiAgSW5wdXQsXG4gIHR5cGUgT25DaGFuZ2VzLFxuICB0eXBlIE9uRGVzdHJveSxcbiAgdHlwZSBPbkluaXQsXG4gIGJvb2xlYW5BdHRyaWJ1dGUsXG4gIG51bWJlckF0dHJpYnV0ZSxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSdcbmltcG9ydCB7XG4gIHR5cGUgRGVlcEtleXMsXG4gIHR5cGUgRGVlcFZhbHVlLFxuICBGaWVsZEFwaSxcbiAgdHlwZSBGaWVsZE1ldGEsXG4gIHR5cGUgRmllbGRPcHRpb25zLFxuICB0eXBlIEZpZWxkVmFsaWRhdG9ycyxcbiAgRm9ybUFwaSxcbiAgdHlwZSBOb0luZmVyIGFzIE5vSW5mZXJIYWNrLFxuICB0eXBlIFZhbGlkYXRvcixcbn0gZnJvbSAnQHRhbnN0YWNrL2Zvcm0tY29yZSdcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3RhbnN0YWNrRmllbGRdJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgZXhwb3J0QXM6ICdmaWVsZCcsXG59KVxuZXhwb3J0IGNsYXNzIFRhblN0YWNrRmllbGQ8XG4gICAgVFBhcmVudERhdGEsXG4gICAgY29uc3QgVE5hbWUgZXh0ZW5kcyBEZWVwS2V5czxUUGFyZW50RGF0YT4sXG4gICAgVEZpZWxkVmFsaWRhdG9yIGV4dGVuZHNcbiAgICAgIHwgVmFsaWRhdG9yPERlZXBWYWx1ZTxUUGFyZW50RGF0YSwgVE5hbWU+LCB1bmtub3duPlxuICAgICAgfCB1bmRlZmluZWQgPSB1bmRlZmluZWQsXG4gICAgVEZvcm1WYWxpZGF0b3IgZXh0ZW5kc1xuICAgICAgfCBWYWxpZGF0b3I8VFBhcmVudERhdGEsIHVua25vd24+XG4gICAgICB8IHVuZGVmaW5lZCA9IHVuZGVmaW5lZCxcbiAgICBURGF0YSBleHRlbmRzIERlZXBWYWx1ZTxUUGFyZW50RGF0YSwgVE5hbWU+ID0gRGVlcFZhbHVlPFRQYXJlbnREYXRhLCBUTmFtZT4sXG4gID5cbiAgaW1wbGVtZW50c1xuICAgIE9uSW5pdCxcbiAgICBPbkNoYW5nZXMsXG4gICAgT25EZXN0cm95LFxuICAgIEZpZWxkT3B0aW9uczxUUGFyZW50RGF0YSwgVE5hbWUsIFRGaWVsZFZhbGlkYXRvciwgVEZvcm1WYWxpZGF0b3IsIFREYXRhPlxue1xuICBASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSBuYW1lITogVE5hbWVcbiAgLy8gU2V0dGluZyBhcyBOb0luZmVySGFjayBhcyBpdCdzIHRoZSBzYW1lIGludGVybmFsIHR5cGUgY2FzdCBhcyBUYW5TdGFjayBGb3JtIENvcmVcbiAgLy8gVGhpcyBjYW4gYmUgcmVtb3ZlZCB3aGVuIFRhblN0YWNrIEZvcm0gQ29yZSBpcyBtb3ZlZCB0byBUUyBtaW4gb2YgNS40XG4gIC8vIGFuZCB0aGUgTm9JbmZlciBpbnRlcm5hbCB1dGlsIHR5cGUgaXMgcm0tcmYnZFxuICBASW5wdXQoKSBkZWZhdWx0VmFsdWU/OiBOb0luZmVySGFjazxURGF0YT5cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBudW1iZXJBdHRyaWJ1dGUgfSkgYXN5bmNEZWJvdW5jZU1zPzogbnVtYmVyXG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSB9KSBhc3luY0Fsd2F5cz86IGJvb2xlYW5cbiAgQElucHV0KCkgdmFsaWRhdG9yQWRhcHRlcj86IFRGaWVsZFZhbGlkYXRvclxuICBASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSB0YW5zdGFja0ZpZWxkITogRm9ybUFwaTxcbiAgICBUUGFyZW50RGF0YSxcbiAgICBURm9ybVZhbGlkYXRvclxuICA+XG4gIEBJbnB1dCgpIHZhbGlkYXRvcnM/OiBOb0luZmVyPFxuICAgIEZpZWxkVmFsaWRhdG9yczxUUGFyZW50RGF0YSwgVE5hbWUsIFRGaWVsZFZhbGlkYXRvciwgVEZvcm1WYWxpZGF0b3IsIFREYXRhPlxuICA+XG4gIEBJbnB1dCgpIGRlZmF1bHRNZXRhPzogUGFydGlhbDxGaWVsZE1ldGE+XG5cbiAgYXBpITogRmllbGRBcGk8VFBhcmVudERhdGEsIFROYW1lLCBURmllbGRWYWxpZGF0b3IsIFRGb3JtVmFsaWRhdG9yLCBURGF0YT5cblxuICBwcml2YXRlIGdldE9wdGlvbnMoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIGRlZmF1bHRWYWx1ZTogdGhpcy5kZWZhdWx0VmFsdWUsXG4gICAgICBhc3luY0RlYm91bmNlTXM6IHRoaXMuYXN5bmNEZWJvdW5jZU1zLFxuICAgICAgYXN5bmNBbHdheXM6IHRoaXMuYXN5bmNBbHdheXMsXG4gICAgICB2YWxpZGF0b3JBZGFwdGVyOiB0aGlzLnZhbGlkYXRvckFkYXB0ZXIsXG4gICAgICB2YWxpZGF0b3JzOiB0aGlzLnZhbGlkYXRvcnMsXG4gICAgICBkZWZhdWx0TWV0YTogdGhpcy5kZWZhdWx0TWV0YSxcbiAgICAgIG5hbWU6IHRoaXMubmFtZSxcbiAgICAgIGZvcm06IHRoaXMudGFuc3RhY2tGaWVsZCxcbiAgICB9XG4gIH1cblxuICB1bm1vdW50PzogKCkgPT4gdm9pZFxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuYXBpID0gbmV3IEZpZWxkQXBpKHRoaXMuZ2V0T3B0aW9ucygpKVxuXG4gICAgdGhpcy51bm1vdW50ID0gdGhpcy5hcGkubW91bnQoKVxuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy51bm1vdW50Py4oKVxuICB9XG5cbiAgbmdPbkNoYW5nZXMoKSB7XG4gICAgY29uc3QgYXBpID0gdGhpcy5hcGkgYXMgdHlwZW9mIHRoaXMuYXBpIHwgdW5kZWZpbmVkXG4gICAgaWYgKCFhcGkpIHJldHVyblxuICAgIGFwaS51cGRhdGUodGhpcy5nZXRPcHRpb25zKCkpXG4gIH1cbn1cbiJdfQ==
|
|
@@ -18,7 +18,6 @@ class TanStackField {
|
|
|
18
18
|
defaultValue;
|
|
19
19
|
asyncDebounceMs;
|
|
20
20
|
asyncAlways;
|
|
21
|
-
preserveValue;
|
|
22
21
|
validatorAdapter;
|
|
23
22
|
tanstackField;
|
|
24
23
|
validators;
|
|
@@ -29,7 +28,6 @@ class TanStackField {
|
|
|
29
28
|
defaultValue: this.defaultValue,
|
|
30
29
|
asyncDebounceMs: this.asyncDebounceMs,
|
|
31
30
|
asyncAlways: this.asyncAlways,
|
|
32
|
-
preserveValue: this.preserveValue,
|
|
33
31
|
validatorAdapter: this.validatorAdapter,
|
|
34
32
|
validators: this.validators,
|
|
35
33
|
defaultMeta: this.defaultMeta,
|
|
@@ -52,7 +50,7 @@ class TanStackField {
|
|
|
52
50
|
api.update(this.getOptions());
|
|
53
51
|
}
|
|
54
52
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TanStackField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
55
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: TanStackField, isStandalone: true, selector: "[tanstackField]", inputs: { name: "name", defaultValue: "defaultValue", asyncDebounceMs: ["asyncDebounceMs", "asyncDebounceMs", numberAttribute], asyncAlways: ["asyncAlways", "asyncAlways", booleanAttribute],
|
|
53
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: TanStackField, isStandalone: true, selector: "[tanstackField]", inputs: { name: "name", defaultValue: "defaultValue", asyncDebounceMs: ["asyncDebounceMs", "asyncDebounceMs", numberAttribute], asyncAlways: ["asyncAlways", "asyncAlways", booleanAttribute], validatorAdapter: "validatorAdapter", tanstackField: "tanstackField", validators: "validators", defaultMeta: "defaultMeta" }, exportAs: ["field"], usesOnChanges: true, ngImport: i0 });
|
|
56
54
|
}
|
|
57
55
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TanStackField, decorators: [{
|
|
58
56
|
type: Directive,
|
|
@@ -72,9 +70,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
72
70
|
}], asyncAlways: [{
|
|
73
71
|
type: Input,
|
|
74
72
|
args: [{ transform: booleanAttribute }]
|
|
75
|
-
}], preserveValue: [{
|
|
76
|
-
type: Input,
|
|
77
|
-
args: [{ transform: booleanAttribute }]
|
|
78
73
|
}], validatorAdapter: [{
|
|
79
74
|
type: Input
|
|
80
75
|
}], tanstackField: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tanstack-angular-form.mjs","sources":["../../src/inject-form.ts","../../src/tanstack-field.directive.ts","../../src/inject-store.ts","../../src/tanstack-angular-form.ts"],"sourcesContent":["import { FormApi, type FormOptions, type Validator } from '@tanstack/form-core'\nimport { injectStore } from '@tanstack/angular-store'\n\nexport function injectForm<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(opts?: FormOptions<TFormData, TFormValidator>) {\n const api = new FormApi<TFormData, TFormValidator>(opts)\n\n injectStore(api.store, (state) => state.isSubmitting)\n\n return api\n}\n","import {\n Directive,\n Input,\n type OnChanges,\n type OnDestroy,\n type OnInit,\n booleanAttribute,\n numberAttribute,\n} from '@angular/core'\nimport {\n type DeepKeys,\n type DeepValue,\n FieldApi,\n type FieldMeta,\n type FieldOptions,\n type FieldValidators,\n FormApi,\n type NoInfer as NoInferHack,\n type Validator,\n} from '@tanstack/form-core'\n\n@Directive({\n selector: '[tanstackField]',\n standalone: true,\n exportAs: 'field',\n})\nexport class TanStackField<\n TParentData,\n const TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n >\n implements\n OnInit,\n OnChanges,\n OnDestroy,\n FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\n{\n @Input({ required: true }) name!: TName\n // Setting as NoInferHack as it's the same internal type cast as TanStack Form Core\n // This can be removed when TanStack Form Core is moved to TS min of 5.4\n // and the NoInfer internal util type is rm-rf'd\n @Input() defaultValue?: NoInferHack<TData>\n @Input({ transform: numberAttribute }) asyncDebounceMs?: number\n @Input({ transform: booleanAttribute }) asyncAlways?: boolean\n @Input(
|
|
1
|
+
{"version":3,"file":"tanstack-angular-form.mjs","sources":["../../src/inject-form.ts","../../src/tanstack-field.directive.ts","../../src/inject-store.ts","../../src/tanstack-angular-form.ts"],"sourcesContent":["import { FormApi, type FormOptions, type Validator } from '@tanstack/form-core'\nimport { injectStore } from '@tanstack/angular-store'\n\nexport function injectForm<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(opts?: FormOptions<TFormData, TFormValidator>) {\n const api = new FormApi<TFormData, TFormValidator>(opts)\n\n injectStore(api.store, (state) => state.isSubmitting)\n\n return api\n}\n","import {\n Directive,\n Input,\n type OnChanges,\n type OnDestroy,\n type OnInit,\n booleanAttribute,\n numberAttribute,\n} from '@angular/core'\nimport {\n type DeepKeys,\n type DeepValue,\n FieldApi,\n type FieldMeta,\n type FieldOptions,\n type FieldValidators,\n FormApi,\n type NoInfer as NoInferHack,\n type Validator,\n} from '@tanstack/form-core'\n\n@Directive({\n selector: '[tanstackField]',\n standalone: true,\n exportAs: 'field',\n})\nexport class TanStackField<\n TParentData,\n const TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n >\n implements\n OnInit,\n OnChanges,\n OnDestroy,\n FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\n{\n @Input({ required: true }) name!: TName\n // Setting as NoInferHack as it's the same internal type cast as TanStack Form Core\n // This can be removed when TanStack Form Core is moved to TS min of 5.4\n // and the NoInfer internal util type is rm-rf'd\n @Input() defaultValue?: NoInferHack<TData>\n @Input({ transform: numberAttribute }) asyncDebounceMs?: number\n @Input({ transform: booleanAttribute }) asyncAlways?: boolean\n @Input() validatorAdapter?: TFieldValidator\n @Input({ required: true }) tanstackField!: FormApi<\n TParentData,\n TFormValidator\n >\n @Input() validators?: NoInfer<\n FieldValidators<TParentData, TName, TFieldValidator, TFormValidator, TData>\n >\n @Input() defaultMeta?: Partial<FieldMeta>\n\n api!: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\n private getOptions() {\n return {\n defaultValue: this.defaultValue,\n asyncDebounceMs: this.asyncDebounceMs,\n asyncAlways: this.asyncAlways,\n validatorAdapter: this.validatorAdapter,\n validators: this.validators,\n defaultMeta: this.defaultMeta,\n name: this.name,\n form: this.tanstackField,\n }\n }\n\n unmount?: () => void\n\n ngOnInit() {\n this.api = new FieldApi(this.getOptions())\n\n this.unmount = this.api.mount()\n }\n\n ngOnDestroy() {\n this.unmount?.()\n }\n\n ngOnChanges() {\n const api = this.api as typeof this.api | undefined\n if (!api) return\n api.update(this.getOptions())\n }\n}\n","import { injectStore as injectAngularStore } from '@tanstack/angular-store'\nimport type { FormApi, FormState, Validator } from '@tanstack/form-core'\n\nexport function injectStore<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n TSelected = NoInfer<FormState<TFormData>>,\n>(\n form: FormApi<TFormData, TFormValidator>,\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n) {\n return injectAngularStore(form.store, selector)\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["injectStore","injectAngularStore"],"mappings":"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"}
|
|
@@ -6,7 +6,6 @@ export declare class TanStackField<TParentData, const TName extends DeepKeys<TPa
|
|
|
6
6
|
defaultValue?: NoInferHack<TData>;
|
|
7
7
|
asyncDebounceMs?: number;
|
|
8
8
|
asyncAlways?: boolean;
|
|
9
|
-
preserveValue?: boolean;
|
|
10
9
|
validatorAdapter?: TFieldValidator;
|
|
11
10
|
tanstackField: FormApi<TParentData, TFormValidator>;
|
|
12
11
|
validators?: NoInfer<FieldValidators<TParentData, TName, TFieldValidator, TFormValidator, TData>>;
|
|
@@ -18,8 +17,7 @@ export declare class TanStackField<TParentData, const TName extends DeepKeys<TPa
|
|
|
18
17
|
ngOnDestroy(): void;
|
|
19
18
|
ngOnChanges(): void;
|
|
20
19
|
static ɵfac: i0.ɵɵFactoryDeclaration<TanStackField<any, any, any, any, any>, never>;
|
|
21
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<TanStackField<any, any, any, any, any>, "[tanstackField]", ["field"], { "name": { "alias": "name"; "required": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; }; "asyncDebounceMs": { "alias": "asyncDebounceMs"; "required": false; }; "asyncAlways": { "alias": "asyncAlways"; "required": false; }; "
|
|
20
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<TanStackField<any, any, any, any, any>, "[tanstackField]", ["field"], { "name": { "alias": "name"; "required": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; }; "asyncDebounceMs": { "alias": "asyncDebounceMs"; "required": false; }; "asyncAlways": { "alias": "asyncAlways"; "required": false; }; "validatorAdapter": { "alias": "validatorAdapter"; "required": false; }; "tanstackField": { "alias": "tanstackField"; "required": true; }; "validators": { "alias": "validators"; "required": false; }; "defaultMeta": { "alias": "defaultMeta"; "required": false; }; }, {}, never, never, true, never>;
|
|
22
21
|
static ngAcceptInputType_asyncDebounceMs: unknown;
|
|
23
22
|
static ngAcceptInputType_asyncAlways: unknown;
|
|
24
|
-
static ngAcceptInputType_preserveValue: unknown;
|
|
25
23
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/angular-form",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.24.0",
|
|
4
4
|
"description": "Powerful, type-safe forms for Angular.",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@tanstack/angular-store": "^0.5.1",
|
|
38
38
|
"tslib": "^2.3.0",
|
|
39
|
-
"@tanstack/form-core": "0.
|
|
39
|
+
"@tanstack/form-core": "0.24.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@analogjs/vite-plugin-angular": "^1.0.0",
|
|
@@ -48,7 +48,6 @@ export class TanStackField<
|
|
|
48
48
|
@Input() defaultValue?: NoInferHack<TData>
|
|
49
49
|
@Input({ transform: numberAttribute }) asyncDebounceMs?: number
|
|
50
50
|
@Input({ transform: booleanAttribute }) asyncAlways?: boolean
|
|
51
|
-
@Input({ transform: booleanAttribute }) preserveValue?: boolean
|
|
52
51
|
@Input() validatorAdapter?: TFieldValidator
|
|
53
52
|
@Input({ required: true }) tanstackField!: FormApi<
|
|
54
53
|
TParentData,
|
|
@@ -66,7 +65,6 @@ export class TanStackField<
|
|
|
66
65
|
defaultValue: this.defaultValue,
|
|
67
66
|
asyncDebounceMs: this.asyncDebounceMs,
|
|
68
67
|
asyncAlways: this.asyncAlways,
|
|
69
|
-
preserveValue: this.preserveValue,
|
|
70
68
|
validatorAdapter: this.validatorAdapter,
|
|
71
69
|
validators: this.validators,
|
|
72
70
|
defaultMeta: this.defaultMeta,
|
package/src/test-setup.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import '@analogjs/vite-plugin-angular/setup-vitest'
|
|
2
|
-
import '@testing-library/jest-dom/vitest'
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
BrowserDynamicTestingModule,
|
|
6
|
-
platformBrowserDynamicTesting,
|
|
7
|
-
} from '@angular/platform-browser-dynamic/testing'
|
|
8
|
-
import { getTestBed } from '@angular/core/testing'
|
|
9
|
-
|
|
10
|
-
getTestBed().initTestEnvironment(
|
|
11
|
-
BrowserDynamicTestingModule,
|
|
12
|
-
platformBrowserDynamicTesting(),
|
|
13
|
-
)
|
|
@@ -1,358 +0,0 @@
|
|
|
1
|
-
import { render } from '@testing-library/angular'
|
|
2
|
-
import { Component } from '@angular/core'
|
|
3
|
-
import { describe, expect, it } from 'vitest'
|
|
4
|
-
import { userEvent } from '@testing-library/user-event'
|
|
5
|
-
import { injectForm } from '../inject-form'
|
|
6
|
-
import { TanStackField } from '../tanstack-field.directive'
|
|
7
|
-
import { sleep } from './utils'
|
|
8
|
-
import type { FieldValidateAsyncFn, FieldValidateFn } from '@tanstack/form-core'
|
|
9
|
-
|
|
10
|
-
const user = userEvent.setup()
|
|
11
|
-
|
|
12
|
-
describe('TanStackFieldDirective', () => {
|
|
13
|
-
it('should allow to set default value', async () => {
|
|
14
|
-
@Component({
|
|
15
|
-
selector: 'test-component',
|
|
16
|
-
standalone: true,
|
|
17
|
-
template: `
|
|
18
|
-
<ng-container [tanstackField]="form" name="firstName" #f="field">
|
|
19
|
-
<input
|
|
20
|
-
data-testid="fieldinput"
|
|
21
|
-
[value]="f.api.state.value"
|
|
22
|
-
(blur)="f.api.handleBlur()"
|
|
23
|
-
(input)="f.api.handleChange($any($event).target.value)"
|
|
24
|
-
/>
|
|
25
|
-
</ng-container>
|
|
26
|
-
`,
|
|
27
|
-
imports: [TanStackField],
|
|
28
|
-
})
|
|
29
|
-
class TestComponent {
|
|
30
|
-
form = injectForm({
|
|
31
|
-
defaultValues: {
|
|
32
|
-
firstName: 'FirstName',
|
|
33
|
-
lastName: 'LastName',
|
|
34
|
-
},
|
|
35
|
-
})
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
const { getByTestId } = await render(TestComponent)
|
|
39
|
-
|
|
40
|
-
const input = getByTestId('fieldinput')
|
|
41
|
-
expect(input).toHaveValue('FirstName')
|
|
42
|
-
})
|
|
43
|
-
|
|
44
|
-
it('should use field default value first', async () => {
|
|
45
|
-
type Person = {
|
|
46
|
-
firstName: string
|
|
47
|
-
lastName: string
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
@Component({
|
|
51
|
-
selector: 'test-component',
|
|
52
|
-
standalone: true,
|
|
53
|
-
template: `
|
|
54
|
-
<ng-container
|
|
55
|
-
[tanstackField]="form"
|
|
56
|
-
name="firstName"
|
|
57
|
-
defaultValue="otherName"
|
|
58
|
-
#f="field"
|
|
59
|
-
>
|
|
60
|
-
<input
|
|
61
|
-
data-testid="fieldinput"
|
|
62
|
-
[value]="f.api.state.value"
|
|
63
|
-
(blur)="f.api.handleBlur()"
|
|
64
|
-
(input)="f.api.handleChange($any($event).target.value)"
|
|
65
|
-
/>
|
|
66
|
-
</ng-container>
|
|
67
|
-
`,
|
|
68
|
-
imports: [TanStackField],
|
|
69
|
-
})
|
|
70
|
-
class TestComponent {
|
|
71
|
-
form = injectForm<Person>({
|
|
72
|
-
defaultValues: {
|
|
73
|
-
firstName: 'FirstName',
|
|
74
|
-
lastName: 'LastName',
|
|
75
|
-
},
|
|
76
|
-
})
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
const { getByTestId } = await render(TestComponent)
|
|
80
|
-
|
|
81
|
-
const input = getByTestId('fieldinput')
|
|
82
|
-
expect(input).toHaveValue('otherName')
|
|
83
|
-
})
|
|
84
|
-
|
|
85
|
-
it('should not validate on change if isTouched is false', async () => {
|
|
86
|
-
type Person = {
|
|
87
|
-
firstName: string
|
|
88
|
-
lastName: string
|
|
89
|
-
}
|
|
90
|
-
const error = 'Please enter a different value'
|
|
91
|
-
|
|
92
|
-
@Component({
|
|
93
|
-
selector: 'test-component',
|
|
94
|
-
standalone: true,
|
|
95
|
-
template: `
|
|
96
|
-
<ng-container
|
|
97
|
-
[tanstackField]="form"
|
|
98
|
-
name="firstName"
|
|
99
|
-
[validators]="{ onChange: otherValidator }"
|
|
100
|
-
#f="field"
|
|
101
|
-
>
|
|
102
|
-
<input
|
|
103
|
-
data-testid="fieldinput"
|
|
104
|
-
[value]="f.api.state.value"
|
|
105
|
-
(blur)="f.api.handleBlur()"
|
|
106
|
-
(input)="f.api.setValue($any($event).target.value)"
|
|
107
|
-
/>
|
|
108
|
-
@for (error of f.api.getMeta().errors; track error) {
|
|
109
|
-
<p>{{ error }}</p>
|
|
110
|
-
}
|
|
111
|
-
</ng-container>
|
|
112
|
-
`,
|
|
113
|
-
imports: [TanStackField],
|
|
114
|
-
})
|
|
115
|
-
class TestComponent {
|
|
116
|
-
otherValidator: FieldValidateFn<Person, 'firstName'> = ({ value }) =>
|
|
117
|
-
value === 'other' ? error : undefined
|
|
118
|
-
|
|
119
|
-
form = injectForm<Person>({
|
|
120
|
-
defaultValues: {
|
|
121
|
-
firstName: 'FirstName',
|
|
122
|
-
lastName: 'LastName',
|
|
123
|
-
},
|
|
124
|
-
})
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
const { getByTestId, queryByText } = await render(TestComponent)
|
|
128
|
-
const input = getByTestId('fieldinput')
|
|
129
|
-
await user.type(input, 'other')
|
|
130
|
-
expect(queryByText(error)).not.toBeInTheDocument()
|
|
131
|
-
})
|
|
132
|
-
|
|
133
|
-
it('should validate on change if isTouched is true', async () => {
|
|
134
|
-
type Person = {
|
|
135
|
-
firstName: string
|
|
136
|
-
lastName: string
|
|
137
|
-
}
|
|
138
|
-
const error = 'Please enter a different value'
|
|
139
|
-
|
|
140
|
-
@Component({
|
|
141
|
-
selector: 'test-component',
|
|
142
|
-
standalone: true,
|
|
143
|
-
template: `
|
|
144
|
-
<ng-container
|
|
145
|
-
[tanstackField]="form"
|
|
146
|
-
name="firstName"
|
|
147
|
-
[defaultMeta]="{ isTouched: true }"
|
|
148
|
-
[validators]="{ onChange: otherValidator }"
|
|
149
|
-
#f="field"
|
|
150
|
-
>
|
|
151
|
-
<input
|
|
152
|
-
data-testid="fieldinput"
|
|
153
|
-
[value]="f.api.state.value"
|
|
154
|
-
(blur)="f.api.handleBlur()"
|
|
155
|
-
(input)="f.api.handleChange($any($event).target.value)"
|
|
156
|
-
/>
|
|
157
|
-
<p>{{ f.api.getMeta().errorMap?.onChange }}</p>
|
|
158
|
-
</ng-container>
|
|
159
|
-
`,
|
|
160
|
-
imports: [TanStackField],
|
|
161
|
-
})
|
|
162
|
-
class TestComponent {
|
|
163
|
-
otherValidator: FieldValidateFn<Person, 'firstName'> = ({ value }) =>
|
|
164
|
-
value === 'other' ? error : undefined
|
|
165
|
-
|
|
166
|
-
form = injectForm<Person>({
|
|
167
|
-
defaultValues: {
|
|
168
|
-
firstName: '',
|
|
169
|
-
lastName: '',
|
|
170
|
-
},
|
|
171
|
-
})
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
const { getByTestId, queryByText, getByText } = await render(TestComponent)
|
|
175
|
-
|
|
176
|
-
const input = getByTestId('fieldinput')
|
|
177
|
-
expect(queryByText(error)).not.toBeInTheDocument()
|
|
178
|
-
await user.type(input, 'other')
|
|
179
|
-
expect(getByText(error)).toBeInTheDocument()
|
|
180
|
-
})
|
|
181
|
-
|
|
182
|
-
it('should validate on change and on blur', async () => {
|
|
183
|
-
type Person = {
|
|
184
|
-
firstName: string
|
|
185
|
-
lastName: string
|
|
186
|
-
}
|
|
187
|
-
const onChangeError = 'Please enter a different value (onChangeError)'
|
|
188
|
-
const onBlurError = 'Please enter a different value (onBlurError)'
|
|
189
|
-
|
|
190
|
-
@Component({
|
|
191
|
-
selector: 'test-component',
|
|
192
|
-
standalone: true,
|
|
193
|
-
template: `
|
|
194
|
-
<ng-container
|
|
195
|
-
[tanstackField]="form"
|
|
196
|
-
name="firstName"
|
|
197
|
-
[defaultMeta]="{ isTouched: true }"
|
|
198
|
-
[validators]="{ onChange: onChange, onBlur: onBlur }"
|
|
199
|
-
#f="field"
|
|
200
|
-
>
|
|
201
|
-
<input
|
|
202
|
-
data-testid="fieldinput"
|
|
203
|
-
[value]="f.api.state.value"
|
|
204
|
-
[name]="f.api.name"
|
|
205
|
-
(blur)="f.api.handleBlur()"
|
|
206
|
-
(input)="f.api.setValue($any($event).target.value)"
|
|
207
|
-
/>
|
|
208
|
-
<p>{{ f.api.getMeta().errorMap?.onChange }}</p>
|
|
209
|
-
<p>{{ f.api.getMeta().errorMap?.onBlur }}</p>
|
|
210
|
-
</ng-container>
|
|
211
|
-
`,
|
|
212
|
-
imports: [TanStackField],
|
|
213
|
-
})
|
|
214
|
-
class TestComponent {
|
|
215
|
-
onChange: FieldValidateFn<Person, 'firstName'> = ({ value }) =>
|
|
216
|
-
value === 'other' ? onChangeError : undefined
|
|
217
|
-
onBlur: FieldValidateFn<Person, 'firstName'> = ({ value }) =>
|
|
218
|
-
value === 'other' ? onBlurError : undefined
|
|
219
|
-
|
|
220
|
-
form = injectForm<Person>({
|
|
221
|
-
defaultValues: {
|
|
222
|
-
firstName: '',
|
|
223
|
-
lastName: '',
|
|
224
|
-
},
|
|
225
|
-
})
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
const { getByTestId, getByText, queryByText } = await render(TestComponent)
|
|
229
|
-
const input = getByTestId('fieldinput')
|
|
230
|
-
expect(queryByText(onChangeError)).not.toBeInTheDocument()
|
|
231
|
-
expect(queryByText(onBlurError)).not.toBeInTheDocument()
|
|
232
|
-
await user.type(input, 'other')
|
|
233
|
-
expect(getByText(onChangeError)).toBeInTheDocument()
|
|
234
|
-
await user.click(document.body)
|
|
235
|
-
expect(queryByText(onBlurError)).toBeInTheDocument()
|
|
236
|
-
})
|
|
237
|
-
|
|
238
|
-
it('should validate async on change', async () => {
|
|
239
|
-
type Person = {
|
|
240
|
-
firstName: string
|
|
241
|
-
lastName: string
|
|
242
|
-
}
|
|
243
|
-
const error = 'Please enter a different value'
|
|
244
|
-
|
|
245
|
-
@Component({
|
|
246
|
-
selector: 'test-component',
|
|
247
|
-
standalone: true,
|
|
248
|
-
template: `
|
|
249
|
-
<ng-container
|
|
250
|
-
[tanstackField]="form"
|
|
251
|
-
name="firstName"
|
|
252
|
-
[defaultMeta]="{ isTouched: true }"
|
|
253
|
-
[validators]="{ onChangeAsync: onChangeAsync }"
|
|
254
|
-
#f="field"
|
|
255
|
-
>
|
|
256
|
-
<input
|
|
257
|
-
data-testid="fieldinput"
|
|
258
|
-
[name]="f.api.name"
|
|
259
|
-
[value]="f.api.state.value"
|
|
260
|
-
(blur)="f.api.handleBlur()"
|
|
261
|
-
(input)="f.api.handleChange($any($event).target.value)"
|
|
262
|
-
/>
|
|
263
|
-
<p>{{ f.api.getMeta().errorMap?.onChange }}</p>
|
|
264
|
-
</ng-container>
|
|
265
|
-
`,
|
|
266
|
-
imports: [TanStackField],
|
|
267
|
-
})
|
|
268
|
-
class TestComponent {
|
|
269
|
-
onChangeAsync: FieldValidateAsyncFn<Person, 'firstName'> = async () => {
|
|
270
|
-
await sleep(10)
|
|
271
|
-
return error
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
form = injectForm<Person>({
|
|
275
|
-
defaultValues: {
|
|
276
|
-
firstName: '',
|
|
277
|
-
lastName: '',
|
|
278
|
-
},
|
|
279
|
-
})
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
const { getByTestId, getByText, findByText, queryByText } =
|
|
283
|
-
await render(TestComponent)
|
|
284
|
-
const input = getByTestId('fieldinput')
|
|
285
|
-
expect(queryByText(error)).not.toBeInTheDocument()
|
|
286
|
-
await user.type(input, 'other')
|
|
287
|
-
await findByText(error)
|
|
288
|
-
expect(getByText(error)).toBeInTheDocument()
|
|
289
|
-
})
|
|
290
|
-
|
|
291
|
-
it('should validate async on change and async on blur', async () => {
|
|
292
|
-
type Person = {
|
|
293
|
-
firstName: string
|
|
294
|
-
lastName: string
|
|
295
|
-
}
|
|
296
|
-
const onChangeError = 'Please enter a different value (onChangeError)'
|
|
297
|
-
const onBlurError = 'Please enter a different value (onBlurError)'
|
|
298
|
-
|
|
299
|
-
@Component({
|
|
300
|
-
selector: 'test-component',
|
|
301
|
-
standalone: true,
|
|
302
|
-
template: `
|
|
303
|
-
<ng-container
|
|
304
|
-
[tanstackField]="form"
|
|
305
|
-
name="firstName"
|
|
306
|
-
[defaultMeta]="{ isTouched: true }"
|
|
307
|
-
[validators]="{
|
|
308
|
-
onChangeAsync: onChangeAsync,
|
|
309
|
-
onBlurAsync: onBlurAsync
|
|
310
|
-
}"
|
|
311
|
-
#f="field"
|
|
312
|
-
>
|
|
313
|
-
<input
|
|
314
|
-
data-testid="fieldinput"
|
|
315
|
-
[name]="f.api.name"
|
|
316
|
-
[value]="f.api.state.value"
|
|
317
|
-
(blur)="f.api.handleBlur()"
|
|
318
|
-
(input)="f.api.handleChange($any($event).target.value)"
|
|
319
|
-
/>
|
|
320
|
-
<p>{{ f.api.getMeta().errorMap?.onChange }}</p>
|
|
321
|
-
<p>{{ f.api.getMeta().errorMap?.onBlur }}</p>
|
|
322
|
-
</ng-container>
|
|
323
|
-
`,
|
|
324
|
-
imports: [TanStackField],
|
|
325
|
-
})
|
|
326
|
-
class TestComponent {
|
|
327
|
-
onChangeAsync: FieldValidateAsyncFn<Person, 'firstName'> = async () => {
|
|
328
|
-
await sleep(10)
|
|
329
|
-
return onChangeError
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
onBlurAsync: FieldValidateAsyncFn<Person, 'firstName'> = async () => {
|
|
333
|
-
await sleep(10)
|
|
334
|
-
return onBlurError
|
|
335
|
-
}
|
|
336
|
-
|
|
337
|
-
form = injectForm<Person>({
|
|
338
|
-
defaultValues: {
|
|
339
|
-
firstName: '',
|
|
340
|
-
lastName: '',
|
|
341
|
-
},
|
|
342
|
-
})
|
|
343
|
-
}
|
|
344
|
-
|
|
345
|
-
const { getByTestId, getByText, findByText, queryByText } =
|
|
346
|
-
await render(TestComponent)
|
|
347
|
-
const input = getByTestId('fieldinput')
|
|
348
|
-
|
|
349
|
-
expect(queryByText(onChangeError)).not.toBeInTheDocument()
|
|
350
|
-
expect(queryByText(onBlurError)).not.toBeInTheDocument()
|
|
351
|
-
await user.type(input, 'other')
|
|
352
|
-
await findByText(onChangeError)
|
|
353
|
-
expect(getByText(onChangeError)).toBeInTheDocument()
|
|
354
|
-
await user.click(document.body)
|
|
355
|
-
await findByText(onBlurError)
|
|
356
|
-
expect(getByText(onBlurError)).toBeInTheDocument()
|
|
357
|
-
})
|
|
358
|
-
})
|