NgxCompareObject

An Angular Class tool to compare an initial object with another modified version of itself.

Prerequisites

• Angular: >=19.2.0

Usage

1. Install via npm

npm i ngx-compare-object

2. Import

import { NgxCompareObject } from 'ngx-compare-object';

3. Usage example

<form [formGroup]="form">
   <div>
      <h2>Edit user</h2>
   </div>
   <div>
      <label>First name</label>
      <input type="text" formControlName="firtname">
   </div>
   <div>
      <label>Last name</label>
      <input type="text" formControlName="lastname">
   </div>
   <div>
      <label>Email</label>
      <input type="text" formControlName="email">
   </div>
   <div>
      <button type="button" [disabled]="!hasChanges()" (click)="restore()">Cancel</button>
      <button type="button"  [disabled]="!hasChanges()" (click)="submitUser()">Submit</button>
   </div>
</form>

private fb = inject(FormBuilder);
private route = inject(ActivatedRoute);

private co!: NgxCompareObject<any>;
form: FormGroup;
@Input() id: string;

ngOnInit(){
   if(this.id){
      this.getInfo(this.id);
   }
}

private getInfo(id: string){
   this.http.get('https://example.com/users/'+id)
   .subcribe((response)=>{
      this.initForm(response.user);
   })
}

private initForm(user: IUser){
   this.form = this.fb.group({
    firstname: [user.firstname, Validators.required],
    lastname: [user.lastname, Validators.required],
    email: [user.email, Validators.required]
   });

   const originalForm = this.form.value();

   this.co = new NgxCompareObject(originalForm);
}

hasChanges(): boolean{
   if(!this.co) return false;
   const form = this.form.value();
   return !this.co.isSame(form);
}
private restore(){
   this.form.reset(this.co.getOriginal());
}

submitUser(){
   if(this.hasChanges()){
      //do something
   }
}
cancelSubmit(){
   this.restore();
}