ngneat / dirty-check-forms Goto Github PK
View Code? Open in Web Editor NEW🐬Detect Unsaved Changes in Angular Forms
Home Page: https://netbasal.com/detect-unsaved-changes-in-angular-forms-75fd8f5f1fa6
License: MIT License
dirty-check-forms's People
Stargazers
Watchers
Forkers
nminhduc zeinabaamer777 eduardoquelhas manzonif inesrodriguez fhawkes patrykbialek jeremielapert ffkl singhmohancs gili-lumigo piseysen yaiceltg ippatev dev-thinksdirty-check-forms's Issues
the conform popup twice appears
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
Current behavior
Expected behavior
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Environment
Angular version: X.Y.Z
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: XX
- Platform:
Others:
Browser beforeunload subscription leak
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
Current behavior
The subscription to the browser's beforeunload event does not seem to be unsubscribed after the user navigates outside the page, opening the modal when closing the browser's tab even when the user is not in the page that has the guard.
Expected behavior
The modal should not appear if the user is not even in the page that has the guard.
Minimal reproduction of the problem with instructions
- Start the playground app.
- Navigate to 'Settings'.
- Change a value in the form and try to navigate to 'Home'.
- Select 'Leave' when the modal appears. Now the user is redirected to the 'Home' page.
- Try to close the browser tab.
- A modal appears telling the user some changes were not saved.
What is the motivation / use case for changing the behavior?
Environment
Angular version: 9.1.0
Browser:
- [x] Chrome (desktop) version 87
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: 12.18.0
- Platform: Windows
Others:
Upgrade tslib@2
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
Current behavior
When using the library with angular 12, I get an error during npm i that there is a discrepancy between conflicting versions of tslib. This library requires tslib@"^1.10.0" whereas angular requires tslib@"^2.3.0".
Expected behavior
Library should be compatible and install with recent versions of angular.
Minimal reproduction of the problem with instructions
npm i @angular/common @angular/core tslib @ngneat/dirty-check-forms
What is the motivation / use case for changing the behavior?
Motivation is self-explanatory; I want to use this library with angular 12.
Environment
Angular version: X.Y.Z
Browser:
- [X] Chrome (desktop) version XX
- [X] Chrome (Android) version XX
- [X] Chrome (iOS) version XX
- [X] Firefox version XX
- [X] Safari (desktop) version XX
- [X] Safari (iOS) version XX
- [X] IE version XX
- [X] Edge version XX
For Tooling issues:
- Node version: v14.18.1
- Platform: Windows 10 x64
Others:
n/a
Cannot read property 'pipe' of undefined at dirtyCheck (ngneat-dirty-check-forms.js:88)
After installing this library and running the codebase, start getting this error.
Cannot read property 'pipe' of undefined at dirtyCheck (ngneat-dirty-check-forms.js:88)
Cannot use `@ngneat/dirty-check-forms` in stackblitz
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ X ] Bug report
[ ] Performance issue
[ X ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
Current behavior
I would like to use @ngneat/dirty-check-forms in stackblitz to reproduce an issue but it seems not compatible...
Expected behavior
To work ;)
Minimal reproduction of the problem with instructions
Create a new Angular stackblitz and add the library
Presentational component usage
First of all, thanks for the lib!
But I use it with NGRX and with Containers/Presentational (I call them Meat and Skin) components, and things get complicated. I wonder if there is an easier way, or do I use it right?
Here's the code:
const routes: Routes = [
{
path: "",
component: ComponentSidenav,
children: [
...
{
path: "edit/:id",
component: CompanyEditComponent,
canDeactivate: [FormDirtyGuard],
resolve: {
company: CompanyResolver
}
}
]
}
];
Container:
export class CompanyEditComponent implements DirtyComponent {
...
readonly savedSuccessfully$ = this.stateSvc.saveSuccessful$;
isDirty$: Observable<boolean> | boolean | (() => boolean);
constructor(private stateSvc: CompaniesStateService) {
this.isDirty$ = this.savedSuccessfully$.pipe(
withLatestFrom(this.frmIsDirty.asObservable()),
map(([saved, dirty]) => {
// when data is saved then we don't care if form is dirty or not
return saved ? !saved : dirty;
})
);
}
setFormDirty(value: boolean) {
this.frmIsDirty.next(value);
}
private frmIsDirty = new BehaviorSubject<boolean>(false);
}
Presentation:
@Component({
selector: "ilg-company-edit",
templateUrl: "./company-edit-form.component.html",
styleUrls: ["./company-edit-form.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CompanyEditFormComponent extends IlgDirtyPresentationBase<object, MmlCompany> implements OnInit, OnDestroy {
@Input() company?: MmlCompany;
get form(): FormGroup<any> {
return this.frm;
}
get sourceEntity(): MmlCompany | undefined {
return this.company;
}
frm = this.fb.group<CompanyForm>({...});
constructor(private fb: NonNullableFormBuilder, private route: ActivatedRoute) {
super();
}
override ngOnInit(): void {
super.ngOnInit();
...
// this will have a value 100% because of the data resolver
if (this.company && this.company.id) {
this.frm.patchValue(this.company);
}
}
protected createEntityFromFormValue(frmVal: any): MmlCompany | undefined {
/*
*
* CAREFUL WITH THIS FUNCTION => if any error occurred YOU WON'T SEE IT!
* Use try {} catch {}
*
*/
if (areAllPropsFalsy(frmVal)) {
// if all props are falsy ==> return undefined
return undefined;
}
return new MmlCompany(
frmVal.name ?? "",
frmVal.shortName ?? "",
frmVal.phone ?? "",
frmVal.email ?? "",
this.company ? this.company.printingMml : true,
frmVal.licenseNumber,
frmVal.licenseExpDate,
this.company ? this.company.id : undefined,
frmVal.comment
);
}
}
And here's the common class to implement dirty checking for any of Presentational form component:
export abstract class IlgDirtyPresentationBase<T, R> implements OnInit, OnDestroy {
@Output() formIsDirty = new EventEmitter<boolean>();
abstract form: FormGroup;
abstract sourceEntity: R | undefined;
protected subscriptions = new Subscription();
isDirty$?: Observable<boolean>;
protected abstract createEntityFromFormValue(frmVal: T): R | undefined;
ngOnDestroy() {
this.subscriptions.unsubscribe();
}
ngOnInit(): void {
this.isDirty$ = this.form.valueChanges.pipe(this.checkIsDirty(this.sourceEntity, this.createEntityFromFormValue.bind(this))); // bind() IS IMPORTANT HERE!
this.subscriptions.add(
//
// ===> this subscription MUST BE in ngOnInit !!!
//
this.isDirty$.subscribe((val) => this.formIsDirty.emit(val))
);
}
private checkIsDirty<T, R>(sourceEntity: R | undefined, createEntityFromFormValue: (frmVal: T) => R): OperatorFunction<T, boolean> {
function wrapUserFunction(frmVal: T) {
try {
return createEntityFromFormValue(frmVal);
} catch (e) {
console.error(`createCompanyFromValue exception: ${e}`);
// return {} as R;
throw e;
}
}
return pipe(
debounceTime(400),
distinctUntilChanged(),
map(wrapUserFunction),
map((frmEntity) => !deepEqualRelaxed(sourceEntity, frmEntity)),
startWith(false),
shareReplay()
);
}
I did not find a way to adopt easily dirty-check-forms lib for actual checking. Store shouldn't be present in Presentational components.
Direct use of the global window object
I'm submitting a...
[x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
Current behavior
dirtyCheck operator uses global window object.
dirty-check-forms/libs/dirty-check-forms/src/lib/dirty-check.ts
Lines 62 to 64 in 944447a
Expected behavior
I think, It's better to pass window option in config.
What is the motivation / use case for changing the behavior?
Current behavior leads to restrictions on the use of SSR. Also it's impossible to apply dirtyCheck without beforeunload event.
ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(n)[n -> n -> n -> n]:
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
Current behavior
Expected behavior
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Environment
Angular version: X.Y.Z
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: XX
- Platform:
Others:
Form is marked dirty when dropdown is pre-populated
I have a dropdown that get's pre-populated with default first value from the options, when the form is created it's empty all values are null but then inputs$ that I am using from ngx-sub-form on subscribe are populated with the dropdown values so the form becomes pristine:false and the form is marked as dirty, I am not clear how to fix it. Thank you
initControlWithOptions() {
if (this.autoDisplayFirst && this.options && this.options.length > 0 && this.control) {
const firstOptionValue = this.optionValue ? this.options[0][this.optionValue] : this.options[0];
this.control.patchValue(firstOptionValue, { emitEvent: true });
}
}
Angular version: 17
For Tooling issues:
- Node version: v18.17.0
- Platform: Mac
DirtyCheckGuard trigger confirmChanges on undefined isDirty$
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
Current behavior
When guard is put on a route and a component without isDirty$ implementation the guard triggers the confirmChanges method. I'm not sure if this is a desired behavior.
Minimal reproduction of the problem with instructions
Put the Guard on a route with a component that doesn't implement the isDirty$ property.
What is the motivation / use case for changing the behavior?
It would make sense to not have the confirmChanges triggers.
I can put a proposal if needed.
Best regards,
Dirty check forms on formControll which belong to another formControll
I'm submitting a post to have informations
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ x] Other... Please describe: problem with a project
Current behavior
HI!
First : sorry to my level in English writing
In a project, I've got a form with the save button have the property [disabled] ="!(isDirty$ | async)" in the component.
I call him in a other component with a Selector my-custom-form with [(isDirty$)] ="isDirty$" and (formChange)="formChange($event)". In that component, I call another component which refers to a property of my json object :
data: {
property: {
id: 0,
name: 'foo',
order: 45,
propertyDetails: {
[0]
...
[n]
}
}
}
I can have the button on enable when I change Foo to Foo2 in the input mais the disabled when remove the character 2. In my form, I have the propertyDetails in anothers inputs, but when I make some change, nothing happens.
I could see, all the data I change and enabled the save button are in the model of the form.
Expected behavior
I want to know how make the detection on the propertyDetails in my form.
Could you help me please ?
I would be most grateful in the world 😭😭😭😭
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Environment
Angular version: 10.2.1
Browser:
- [ x] Chrome (desktop) version XX (dépend of the client)
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: 16.13.1
- Platform: windows
Others:
StaticInjectorError(AppModule)[DirtyCheckGuard]:
Error even after injecting in the provider, still throws this error. Please can you look into it ?
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[X] Support request
[ ] Other... Please describe:
Current behavior
Expected behavior
Minimal reproduction of the problem with instructions
just followed the instructions as described in the documentation.
What is the motivation / use case for changing the behavior?
Environment
dev
Angular version: 7.0.3
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [X] Edge Version 83.0.478.56 (Official build) (64-bit)
Jest setup "SyntaxError: Unexpected token export" since the upgrade to 3.0.3
I'm submitting a...
[X] Regression (a behavior that used to work and stopped working in a new release)
Current behavior
When upgrading from 3.0.2 to version 3.0.3, I have an error in my Jest tests related to components using the dirty-check-library.
In fact, now the library is using lodash-es that is exposing esm module not recognized by Jest.
Expected behavior
Using a new MINOR version instead of the PATCH version when upgrading a library.
Uncaught (in promise): TypeError: Class constructor DirtyCheckGuard cannot be invoked without 'new'
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
Current behavior
When I leave the page, I got an error:
Uncaught (in promise): TypeError: Class constructor DirtyCheckGuard cannot be invoked without 'new'\nTypeError: Class constructor DirtyCheckGuard cannot be invoked without 'new'\n at new DirtyGuard (https://localhost:5300/src_app_layout_products_products_module_ts.js:23:19)\n at Object.DirtyGuard_Factory [as factory] (https://localhost:5300/src_app_layout_products_products_module_ts.js:29:12)\n at R3Injector.hydrate (https://localhost:5300/vendor.js:56921:29)\n at R3Injector.get (https://localhost:5300/vendor.js:56822:23)\n at R3Injector.get (https://localhost:5300/vendor.js:56831:27)\n at R3Injector.get (https://localhost:5300/vendor.js:56831:27)\n at getTokenOrFunctionIdentity (https://localhost:5300/vendor.js:134858:27)\n at https://localhost:5300/vendor.js:135152:19\n at Array.map ()\n at runCanDeactivate (https://localhost:5300/vendor.js:135150:50)
Expected behavior
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Environment
Angular version: 15.0.2
Browser:
- [X] Chrome (desktop) version 107.0.5304.107
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: 18
- Platform: Windows 11
Others:
installation does not work
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[X ] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
Current behavior
Expected behavior
yarn add @ngneat/dirty-check-forms
yarn add @ngneat/dirty-check-forms should install the package
Minimal reproduction of the problem with instructions
yarn install command gives error without installation
What is the motivation / use case for changing the behavior?
error An unexpected error occurred: "EPERM: operation not permitted, lstat '..\node_modules\@schematics\update\node_modules\npm-package-arg\node_modules'"
Environment
Angular version: X.Y.Z
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: XX v13.3.0
- npm version 6.13.1
- Platform: Windows 10
Others:
DirtyCheckGuard does not work with lazy-loaded components.
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
Current behavior
DirtyCheckGuard does not work with lazy-loaded components.
Expected behavior
DirtyCheckGuard should work with lazy loaded components.
Minimal reproduction of the problem with instructions
I followed the instructions to set up a DirtyCheckGuard on "In-App navigation", but the instructions require that the component route not be a lazy loaded route. For example, while the example setup on the home page of this repo works, the following will not work:
const routes: Routes = [
{
path: 'settings',
canDeactivate: [DirtyCheckGuard],
loadChildren: () =>
import('./settings.module').then((m) => m.SettingsPageModule)
},
];
If I were more intelligent I would know how to make this work myself, but alas, I am not. Or maybe I missed something obvious.
What is the motivation / use case for changing the behavior?
To be able to keep my routes "lazy-loaded" as well as use the DirtyCheckGuard
Environment
Angular version: 14.2.0
Browser:
- [x] Chrome (desktop) version 105
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: v16.13.1
- Platform: Windows
Others:
Upgrade to Angular 13 format
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[X] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
Current behavior
When using this library with Angular 13, I got this message:
Processing legacy "View Engine" libraries:
- @ngneat/dirty-check-forms [es2015/esm2015] (https://github.com/ngneat/dirty-check-forms)
- @ngneat/dirty-check-forms [module/esm5] (https://github.com/ngneat/dirty-check-forms)
- @ngneat/dirty-check-forms [main/umd] (https://github.com/ngneat/dirty-check-forms)
Encourage the library authors to publish an Ivy distribution.
So I am encouraging it :)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.