useControlPristine

Returns whether an AbstractControl is pristine (has not been modified) as a signal. The signal updates reactively whenever the control's pristine state changes. Works with FormControl, FormGroup, and FormArray.

Usage

import { useControlPristine } from 'ng-reactive-utils';

@Component({
  template: `
    <input [formControl]="nameControl" />

    @if (isPristine()) {
      <span class="hint">Start typing to edit</span>
    }
  `,
})
class EditableFieldComponent {
  nameControl = new FormControl('');
  isPristine = useControlPristine(this.nameControl);
}

Advanced Usage

import { useControlPristine } from 'ng-reactive-utils';

@Component({
  template: `
    <input [formControl]="searchControl" placeholder="Search..." />

    @if (isPristine()) {
      <div class="suggestions">
        <h4>Popular searches</h4>
        <ul>
          <li>Angular signals</li>
          <li>Reactive forms</li>
        </ul>
      </div>
    } @else {
      <div class="results">
        <!-- Show search results -->
      </div>
    }
  `,
})
class SearchComponent {
  searchControl = new FormControl('');
  isPristine = useControlPristine(this.searchControl);
}

Parameters

Parameter	Type	Default	Description
control	AbstractControl	required	The control to check pristine state for

Returns

Signal<boolean> - A readonly signal containing the pristine state (true if not modified)

Notes

• Works with FormControl, FormGroup, and FormArray
• Uses toSignal with control.valueChanges observable
• Returns true when the control value has not been changed
• Returns false when the control is dirty (has been modified)
• Opposite of useControlDirty

Source

import { Signal } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { AbstractControl } from '@angular/forms';
import { map } from 'rxjs';

/**
 * Returns whether an AbstractControl is pristine (has not been modified) as a signal.
 * The signal updates reactively whenever the control's pristine state changes.
 * Works with FormControl, FormGroup, and FormArray.
 *
 * @param control - The AbstractControl to check pristine state for
 * @returns A signal containing the pristine state (true if not modified)
 *
 * @example
 * ```typescript
 * @Component({
 *   template: `
 *     <input [formControl]="nameControl" />
 *     @if (isPristine()) {
 *       <span>Field has not been modified</span>
 *     }
 *   `
 * })
 * class MyComponent {
 *   nameControl = new FormControl('');
 *   isPristine = useControlPristine(this.nameControl);
 * }
 * ```
 */
export const useControlPristine = (control: AbstractControl): Signal<boolean> => {
  return toSignal(control.valueChanges.pipe(map(() => control.pristine)), {
    initialValue: control.pristine,
  }) as Signal<boolean>;
};