Utilities

Form Changes

Knows whether a form differs from what was loaded — to enable Save, warn before leaving or put the values back.

Part of @tectra-ng/utils (npm install @tectra-ng/utils, also included in tectra-ng).

Features1

API

Theming

Basic

Save is on only while something differs; typing the old value back turns it off again. Revert puts the saved values back.

26 lines

<form class="form" [formGroup]="form">  <tx-field label="Workspace name">    <input txInput formControlName="name" [fluid]="true" />  </tx-field>  <tx-field label="Region">    <tx-select formControlName="region" [options]="regions" />  </tx-field>  <div class="flex">    <button      txButton      type="button"      label="Save"      [disabled]="!changes.changed()"      (click)="changes.commit()"    ></button>    <button      txButton      type="button"      label="Revert"      severity="secondary"      [disabled]="!changes.changed()"      (click)="changes.revert()"    ></button>    <span class="hint">{{ changes.changed() ? 'Unsaved changes' : 'All saved' }}</span>  </div></form>