Newtonian Particle Motion

    form-control-change-tracker
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.12 • Public • Published

    Angular Form Control Change Tracker

    Very often when developers need to know if there were any changes inside the a form in order to present a unsaved changes confirmation dialog when navigating away or in order to disable the save button when there is nothing new to save. The FormControlChangeTrackerModule provides two things:

    • The ChangeTrackerDirective (hgChangeTracker) that can be set on the individual form controls in order to track if any changes are made

    • And the @hasChanges() decorator that is applied over the ChangeTrackerDirective directives in order to provide you a boolean value indicating if there are any changes or not.

    Usage:

    1. Import the module

    your.module.ts

    @NgModule({
      ...
      imports: [
        ...
        FormControlChangeTrackerModule
      ]
    })
    export class AppModule { }
    1. Add the directives and bind the initial value for each one.(the current example is using reactive forms but the module can be used with template driven forms as well. Check out the demo app)

    your.component.html

    <form [formGroup]="form" (ngSubmit)="submit()">
      <div class="form-group">
        <label>First Name</label>
        <input type="text" name="firstName" formControlName="firstName" hgChangeTracker
          [initialValue]="firstNameDefaultValue" />
      </div>
      <div class="form-group">
        <label>Last Name</label>
        <input type="text" name="lastName" formControlName="lastName" hgChangeTracker
          [initialValue]="lastNameDefaultValue" />
      </div>
      <button [disabled]="!hasFormChanges">Submit</button>
    </form>
    1. Get the hasFormChanges value

    your.component.ts

    @Component({
      ...
    })
    export class TemplateFromComponent {
    
      @ViewChildren(ChangeTrackerDirective) @hasChanges() hasFormChanges: boolean;
    
      ...
    
    }

    Check out the demo app

    1. More configurations

    Decorator configuration

    your.component.ts

    @Component({
      ...
    })
    export class TemplateFromComponent {
    
      // ChangesWithValues<T> { hasChanges: boolean; values: { [P in keyof T]: { current: T[P]; initial: T[P]; }; }; } (very useful for debugging)
      @ViewChildren(ChangeTrackerDirective) @hasChanges({ includeChangedValues: true }) formChangesData: ChangesWithValues<T>;
      ...
    }

    Inputs

    change-tracker.directive

    @Directive({
      selector: '[ngModel][hgChangeTracker],[formControl][hgChangeTracker],[formControlName][hgChangeTracker]',
      exportAs: 'hgChangeTracker'
    })
    export class ChangeTrackerDirective {
    
      @Input() multiInitialValue = false; // used for multiple initial values
      @Input() autoInitialValueSync = true; // it can be used to disable the auto syncing of initialValue input
    
      // whenever the auto sync is disabled this method needs to be manually called in order for the new initial value to be set
      // keep in mind that the newValue is optional and if omitted the last change of the initialValue binding will be the new initial value
      resetInitialValue(newValue?: T) { ... }
    }

    Install

    npm i form-control-change-tracker

    DownloadsWeekly Downloads

    54

    Version

    3.0.12

    License

    MIT

    Unpacked Size

    104 kB

    Total Files

    20

    Last publish

    Collaborators

    • rampage