An Angular Class tool to compare an initial object with another modified version of itself.
- Angular:
>=19.2.0
- Install via npm
npm i ngx-compare-object
- Import
import{NgxCompareObject}from'ngx-compare-object';- Usage example
<form[formGroup]="form"><div><h2>Edit user</h2></div><div><label>First name</label><inputtype="text" formControlName="firtname"></div><div><label>Last name</label><inputtype="text" formControlName="lastname"></div><div><label>Email</label><inputtype="text" formControlName="email"></div><div><buttontype="button" [disabled]="!hasChanges()" (click)="restore()">Cancel</button><buttontype="button" [disabled]="!hasChanges()" (click)="submitUser()">Submit</button></div></form>privatefb=inject(FormBuilder);privateroute=inject(ActivatedRoute);privateco!: CompareObject; form: FormGroup; @Input() id: string;ngOnInit(){if(this.id){this.getInfo(this.id);}}privategetInfo(id: string){this.http.get('https://example.com/users/'+id).subcribe((response)=>{this.initForm(response.user);})}privateinitForm(user: IUser){this.form=this.fb.group({firstname: [user.firstname,Validators.required],lastname: [user.lastname,Validators.required],email: [user.email,Validators.required]});constoriginalForm=this.form.value();this.co=newCompareObject(originalForm);}hasChanges(): boolean{if(!this.co)return;constform=this.form.value();return!this.co.isSame(form);}privaterestore(){this.form.reset(this.co.getOriginal());}submitUser(){if(this.hasChanges()){//do something}}cancelSubmit(){this.restore();}