New `rawValueChanges` Observable for ReactiveFormsModule

[pcbowers]

Which @angular/* package(s) are relevant/related to the feature request?

forms

Description

Currently, there is no way to listen to just the raw value changes of a reactive form, only the value changes. This means that every time the status of the form changes (i.e. disabled/enabled), a new value is emitted even though the raw value itself hasn't changed. Ideally, there would be a simple way to listen for just raw value changes so that you could use the raw value for output emissions.

Proposed solution

Add a rawValueChanges method.

  protected readonly formModified = output<{ firstName: string | null; lastName: string | null }>();

  protected readonly form = new FormGroup({
    firstName: new FormControl('John'),
    lastName: new FormControl('Doe')
  });

  constructor() {
    this.form.rawValueChanges
      .pipe(takeUntilDestroyed())
      .subscribe(rawValue => this.formModified.emit(rawValue));
  }

This would allow a user to still enable/disable the form without emitting the same value twice.

Alternatives considered

Using a custom distinctUntilChanged pipe to handle values.

  protected readonly formModified = output<{ firstName: string | null; lastName: string | null }>();

  protected readonly form = new FormGroup({
    firstName: new FormControl('John'),
    lastName: new FormControl('Doe')
  });

  constructor() {
    this.form.valueChanges
      .pipe(
        takeUntilDestroyed(),
        startWith(this.form.getRawValue()),
        map(() => this.form.getRawValue()),
        distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
        skip(1)
      )
      .subscribe(rawValue => this.formModified.emit(rawValue));
  }

This isn't ideal: it requires the use of JSON.stringify to ensure deeper comparison (allowing FormGroup or FormArray comparison to work). It's also a lot of logic that could be easily avoided by simply having a separate observable to watch the raw value.

[alxhub]

This is probably technically infeasible without larger architectural changes to reactive forms.

JSON.stringify is necessary because forms doesn't actually track the rawValue, it computes it on-demand. Consequently, forms doesn't actually know when the raw value changes, and can't raise such an event.

[pcbowers]

@alxhub Makes sense. What about making it so that this.form.enable and this.form.disable have an option to emit values to statusChanges only? Right now this.form.enable({ emitEvent: false }) is possible, but stops event emissions on ALL observables. If the emitEvent property were changed to allow a string literal, you could add other options like { emitEvent: 'statusChangesOnly' } to tailor which observables are allowed to receive events.

[pcbowers]

Looking at the code, it would potentially be a pretty simple refactor of https://github.com/angular/angular/blob/main/packages/forms/src/model/abstract_model.ts. Add the following:

// Additional Exports:
export const EmitEventOptions = {
  EVENT: 'event',
  VALUE: 'value',
  STATUS: 'status',
} as const;

export type EmitEventOption = (typeof EmitEventOptions)[keyof typeof EmitEventOptions];
export type EmitEventConfig = boolean | EmitEventOption | EmitEventOption[];

// Helper Method:
private _shouldEmit(target: EmitEventOption, emitEvent?: EmitEventConfig): boolean {
  if (emitEvent === undefined) return true;
  if (typeof emitEvent === 'boolean') return emitEvent;
  if (typeof emitEvent === 'string') return emitEvent === target;
  if (Array.isArray(emitEvent)) return emitEvent.includes(target);
  return true; // fallback for invalid values
}

// Example Usage:
const emitEvent: EmitEventConfig = [EmitEventOptions.EVENT, EmitEventOptions.STATUS];

if (this._shouldEmit(EmitEventOptions.EVENT, emitEvent)) {
  this._events.next(new ValueChangeEvent(this.value, sourceControl));
  this._events.next(new StatusChangeEvent(this.status, sourceControl));
}

if (this._shouldEmit(EmitEventOptions.VALUE, emitEvent)) {
  this.valueChanges.emit(this.value);
}

if (this._shouldEmit(EmitEventOptions.STATUS, emitEvent)) {
  this.statusChanges.emit(this.status);
}

[hakimio]

Very similar issues have been discarded as "won't fix" since the fix breaks some Google internal tests:
#55761
#25749

All the reactive forms issues might as well be marked as "won't fix" at this point and hope for brighter future with the new signal forms.

[pcbowers]

Hmm, this seems different than the issues attached. Hopefully I can help differentiate here.

#55761 is about discarding identical emissions. This is somewhat related, but would really be adding a brand new observable rather than modifying an old observable, so shouldn't cause any breaking tests.

#25749 is about validator changes triggering valueChanges even when the value doesn't change. This falls into a similar category to the first where a distinctUntilChanged would solve the issue of duplicate emissions. Thankfully, this is more about a brand new observable, so again, no breaking tests!

I hear you on signal forms. That said, I don't think ReactiveFormsModule will be deprecated anytime soon! If there's an easy feature that can be added with no breaking changes, that may be ideal.

If creating a new observable is infeasible, maybe my comments here about extending emitEvent should be a new feature so that we can close this one!