@starley/ion-directives 1.3.21 → 1.3.22
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/README.md +5 -5
- package/dist/{utils/form-util.service.d.ts → forms/form-change-detector.service.d.ts} +3 -3
- package/dist/{utils/form-util.service.js → forms/form-change-detector.service.js} +11 -11
- package/dist/forms/form-change-detector.service.js.map +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/utils/form-util.service.js.map +0 -1
package/README.md
CHANGED
|
@@ -35,25 +35,25 @@ import { DirectivesModule } from '@starley/ion-directives';
|
|
|
35
35
|
export class MyComponent {}
|
|
36
36
|
```
|
|
37
37
|
|
|
38
|
-
### Para usar a
|
|
38
|
+
### Para usar a FormChangeDetector
|
|
39
39
|
|
|
40
|
-
* Importe a service
|
|
40
|
+
* Importe a service FormChangeDetector no componente que desejar utilizar.
|
|
41
41
|
|
|
42
42
|
* Injete a service no construtor do componente:
|
|
43
43
|
|
|
44
44
|
```typescript
|
|
45
|
-
constructor(private
|
|
45
|
+
constructor(private formChangeDetector: FormChangeDetector) {}
|
|
46
46
|
```
|
|
47
47
|
|
|
48
48
|
Crie o formulario usando o FormGroup, e chame o método `prepareFormChangeDetection` passando o formulário como parâmetro.
|
|
49
49
|
|
|
50
|
-
Ex: this.myForm = this.
|
|
50
|
+
Ex: this.myForm = this.formChangeDetector.prepareFormChangeDetection(this.myForm);
|
|
51
51
|
|
|
52
52
|
É necessário retornar o formulário para a própria variável, pois quando o formulário é atualizado, as mudanças precisam ser refletidas na variável para que o sistema de detecção de mudanças do Angular funcione corretamente.
|
|
53
53
|
|
|
54
54
|
Agora temos a variavel booleana `isDirty` que indica se o formulário foi modificado e pode ser usada para habilitar/desabilitar botões de salvar com base nas alterações.
|
|
55
55
|
|
|
56
|
-
Ex: if(this.
|
|
56
|
+
Ex: if(this.formChangeDetector.isDirty) { ... }
|
|
57
57
|
|
|
58
58
|
Agora você pode usar o formulário com detecção de mudanças automaticamente.
|
|
59
59
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { FormGroup } from '@angular/forms';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
|
-
export declare class
|
|
3
|
+
export declare class FormChangeDetector {
|
|
4
4
|
isDirty: boolean;
|
|
5
5
|
private originalFormValues;
|
|
6
6
|
private clearFormChangeDetection;
|
|
7
7
|
prepareFormChangeDetection(documentForm: FormGroup): FormGroup<any>;
|
|
8
8
|
private formChangeDetection;
|
|
9
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<
|
|
10
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<
|
|
9
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<FormChangeDetector, never>;
|
|
10
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<FormChangeDetector>;
|
|
11
11
|
}
|
|
@@ -11,15 +11,15 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
};
|
|
12
12
|
import { Injectable } from '@angular/core';
|
|
13
13
|
import * as i0 from "@angular/core";
|
|
14
|
-
var
|
|
15
|
-
function
|
|
14
|
+
var FormChangeDetector = /** @class */ (function () {
|
|
15
|
+
function FormChangeDetector() {
|
|
16
16
|
this.isDirty = false;
|
|
17
17
|
}
|
|
18
|
-
|
|
18
|
+
FormChangeDetector.prototype.clearFormChangeDetection = function () {
|
|
19
19
|
this.originalFormValues = null;
|
|
20
20
|
this.isDirty = false;
|
|
21
21
|
};
|
|
22
|
-
|
|
22
|
+
FormChangeDetector.prototype.prepareFormChangeDetection = function (documentForm) {
|
|
23
23
|
this.clearFormChangeDetection();
|
|
24
24
|
this.originalFormValues = __assign({}, documentForm.getRawValue());
|
|
25
25
|
// Garante estado pristine inicial
|
|
@@ -29,7 +29,7 @@ var FormUtilService = /** @class */ (function () {
|
|
|
29
29
|
this.formChangeDetection(documentForm);
|
|
30
30
|
return documentForm;
|
|
31
31
|
};
|
|
32
|
-
|
|
32
|
+
FormChangeDetector.prototype.formChangeDetection = function (documentForm) {
|
|
33
33
|
var _this = this;
|
|
34
34
|
documentForm.valueChanges.subscribe(function () {
|
|
35
35
|
if (!_this.originalFormValues) {
|
|
@@ -42,15 +42,15 @@ var FormUtilService = /** @class */ (function () {
|
|
|
42
42
|
_this.isDirty = JSON.stringify(normalizedCurrent) !== JSON.stringify(normalizedOriginal);
|
|
43
43
|
});
|
|
44
44
|
};
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
return
|
|
45
|
+
FormChangeDetector.ɵfac = function FormChangeDetector_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FormChangeDetector)(); };
|
|
46
|
+
FormChangeDetector.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: FormChangeDetector, factory: FormChangeDetector.ɵfac, providedIn: 'root' });
|
|
47
|
+
return FormChangeDetector;
|
|
48
48
|
}());
|
|
49
|
-
export {
|
|
50
|
-
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(
|
|
49
|
+
export { FormChangeDetector };
|
|
50
|
+
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormChangeDetector, [{
|
|
51
51
|
type: Injectable,
|
|
52
52
|
args: [{
|
|
53
53
|
providedIn: 'root',
|
|
54
54
|
}]
|
|
55
55
|
}], null, null); })();
|
|
56
|
-
//# sourceMappingURL=form-
|
|
56
|
+
//# sourceMappingURL=form-change-detector.service.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-change-detector.service.js","sourceRoot":"","sources":["../../src/forms/form-change-detector.service.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;;AAG3C;IAAA;QAKI,YAAO,GAAY,KAAK,CAAC;KAmC5B;IA/BW,qDAAwB,GAAhC;QACI,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QAC/B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACzB,CAAC;IAED,uDAA0B,GAA1B,UAA2B,YAAuB;QAC9C,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,IAAI,CAAC,kBAAkB,gBAAQ,YAAY,CAAC,WAAW,EAAE,CAAE,CAAC;QAC5D,kCAAkC;QAClC,YAAY,CAAC,cAAc,EAAE,CAAC;QAC9B,YAAY,CAAC,eAAe,EAAE,CAAC;QAC/B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC;QAEvC,OAAO,YAAY,CAAC;IACxB,CAAC;IAEO,gDAAmB,GAA3B,UAA4B,YAAuB;QAAnD,iBAYC;QAXG,YAAY,CAAC,YAAY,CAAC,SAAS,CAAC;YAChC,IAAI,CAAC,KAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC3B,KAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBACrB,OAAO;YACX,CAAC;YAED,IAAM,aAAa,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC;YACjD,IAAI,iBAAiB,gBAAQ,aAAa,CAAE,CAAC;YAC7C,IAAI,kBAAkB,gBAAQ,KAAI,CAAC,kBAAkB,CAAE,CAAC;YACxD,KAAI,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;QAC5F,CAAC,CAAC,CAAC;IACP,CAAC;wHAnCQ,kBAAkB;4EAAlB,kBAAkB,WAAlB,kBAAkB,mBAFf,MAAM;6BAJtB;CA2CC,AAxCD,IAwCC;SArCY,kBAAkB;uFAAlB,kBAAkB;cAH9B,UAAU;eAAC;gBACR,UAAU,EAAE,MAAM;aACrB","sourcesContent":["import { Injectable } from '@angular/core';\nimport { FormGroup } from '@angular/forms';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class FormChangeDetector {\n\n isDirty: boolean = false;\n\n private originalFormValues: any;\n\n private clearFormChangeDetection() {\n this.originalFormValues = null;\n this.isDirty = false;\n }\n\n prepareFormChangeDetection(documentForm: FormGroup) {\n this.clearFormChangeDetection();\n this.originalFormValues = { ...documentForm.getRawValue() };\n // Garante estado pristine inicial\n documentForm.markAsPristine();\n documentForm.markAsUntouched();\n this.isDirty = false;\n this.formChangeDetection(documentForm);\n\n return documentForm;\n }\n\n private formChangeDetection(documentForm: FormGroup): any {\n documentForm.valueChanges.subscribe(() => {\n if (!this.originalFormValues) {\n this.isDirty = false;\n return;\n }\n\n const currentValues = documentForm.getRawValue();\n let normalizedCurrent = { ...currentValues };\n let normalizedOriginal = { ...this.originalFormValues };\n this.isDirty = JSON.stringify(normalizedCurrent) !== JSON.stringify(normalizedOriginal);\n });\n }\n\n}\n"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
export * from './block-input/block-copy-past.directive';
|
|
2
2
|
export * from './directive.module';
|
|
3
|
-
export { FormUtilService } from './utils/form-util.service';
|
|
4
3
|
export * from './input-mask/input-mask.directive';
|
|
5
4
|
export * from './input-remove/input-remove.directive';
|
|
6
5
|
export * from './press-hold/press-hold.directive';
|
|
@@ -9,3 +8,4 @@ export { DateUtilProvider } from './provider/date-util-provider';
|
|
|
9
8
|
export { IonUtilsProvider } from './provider/ion-utils-provider';
|
|
10
9
|
export { IonValidateFilds } from './provider/ion-validate-filds';
|
|
11
10
|
export * from './tap/tap.directive';
|
|
11
|
+
export { FormChangeDetector } from './forms/form-change-detector.service';
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
export * from './block-input/block-copy-past.directive';
|
|
2
2
|
export * from './directive.module';
|
|
3
|
-
export { FormUtilService } from './utils/form-util.service';
|
|
4
3
|
export * from './input-mask/input-mask.directive';
|
|
5
4
|
export * from './input-remove/input-remove.directive';
|
|
6
5
|
export * from './press-hold/press-hold.directive';
|
|
@@ -9,4 +8,5 @@ export { DateUtilProvider } from './provider/date-util-provider';
|
|
|
9
8
|
export { IonUtilsProvider } from './provider/ion-utils-provider';
|
|
10
9
|
export { IonValidateFilds } from './provider/ion-validate-filds';
|
|
11
10
|
export * from './tap/tap.directive';
|
|
11
|
+
export { FormChangeDetector } from './forms/form-change-detector.service';
|
|
12
12
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yCAAyC,CAAC;AACxD,cAAc,oBAAoB,CAAC;AACnC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yCAAyC,CAAC;AACxD,cAAc,oBAAoB,CAAC;AACnC,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,0BAA0B,EAAE,MAAM,0CAA0C,CAAC;AACtF,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC","sourcesContent":["export * from './block-input/block-copy-past.directive';\nexport * from './directive.module';\nexport * from './input-mask/input-mask.directive';\nexport * from './input-remove/input-remove.directive';\nexport * from './press-hold/press-hold.directive';\nexport { ConnectorSqlitePwaProvider } from './provider/connector-sqlite-pwa.provider';\nexport { DateUtilProvider } from './provider/date-util-provider';\nexport { IonUtilsProvider } from './provider/ion-utils-provider';\nexport { IonValidateFilds } from './provider/ion-validate-filds';\nexport * from './tap/tap.directive';\nexport { FormChangeDetector } from './forms/form-change-detector.service';\n"]}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"form-util.service.js","sourceRoot":"","sources":["../../src/utils/form-util.service.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;;AAG3C;IAAA;QAKI,YAAO,GAAY,KAAK,CAAC;KAmC5B;IA/BW,kDAAwB,GAAhC;QACI,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QAC/B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACzB,CAAC;IAED,oDAA0B,GAA1B,UAA2B,YAAuB;QAC9C,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,IAAI,CAAC,kBAAkB,gBAAQ,YAAY,CAAC,WAAW,EAAE,CAAE,CAAC;QAC5D,kCAAkC;QAClC,YAAY,CAAC,cAAc,EAAE,CAAC;QAC9B,YAAY,CAAC,eAAe,EAAE,CAAC;QAC/B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC;QAEvC,OAAO,YAAY,CAAC;IACxB,CAAC;IAEO,6CAAmB,GAA3B,UAA4B,YAAuB;QAAnD,iBAYC;QAXG,YAAY,CAAC,YAAY,CAAC,SAAS,CAAC;YAChC,IAAI,CAAC,KAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC3B,KAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBACrB,OAAO;YACX,CAAC;YAED,IAAM,aAAa,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC;YACjD,IAAI,iBAAiB,gBAAQ,aAAa,CAAE,CAAC;YAC7C,IAAI,kBAAkB,gBAAQ,KAAI,CAAC,kBAAkB,CAAE,CAAC;YACxD,KAAI,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;QAC5F,CAAC,CAAC,CAAC;IACP,CAAC;kHAnCQ,eAAe;yEAAf,eAAe,WAAf,eAAe,mBAFZ,MAAM;0BAJtB;CA2CC,AAxCD,IAwCC;SArCY,eAAe;uFAAf,eAAe;cAH3B,UAAU;eAAC;gBACR,UAAU,EAAE,MAAM;aACrB","sourcesContent":["import { Injectable } from '@angular/core';\nimport { FormGroup } from '@angular/forms';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class FormUtilService {\n\n isDirty: boolean = false;\n\n private originalFormValues: any;\n\n private clearFormChangeDetection() {\n this.originalFormValues = null;\n this.isDirty = false;\n }\n\n prepareFormChangeDetection(documentForm: FormGroup) {\n this.clearFormChangeDetection();\n this.originalFormValues = { ...documentForm.getRawValue() };\n // Garante estado pristine inicial\n documentForm.markAsPristine();\n documentForm.markAsUntouched();\n this.isDirty = false;\n this.formChangeDetection(documentForm);\n\n return documentForm;\n }\n\n private formChangeDetection(documentForm: FormGroup): any {\n documentForm.valueChanges.subscribe(() => {\n if (!this.originalFormValues) {\n this.isDirty = false;\n return;\n }\n\n const currentValues = documentForm.getRawValue();\n let normalizedCurrent = { ...currentValues };\n let normalizedOriginal = { ...this.originalFormValues };\n this.isDirty = JSON.stringify(normalizedCurrent) !== JSON.stringify(normalizedOriginal);\n });\n }\n\n}\n"]}
|