Creating custom CVA based components is STILL almost impossible to in most not-super-basic scenarios (regardless the unified event api)

[montella1507]

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

forms

Description

It is still impossible to implement working custom CVA based components in 50% of scenarios.

Main cause of this is non-existing way how to get ALL information about AbstractControl.

Why?

• there is not any 100% working way how to get information about important control state (valid/invalid/pristine/touched).
• it is important to know control states like valid/invalid/pristine/touched to correctly implement smarter components than hello world

Why current implementation does not work?

• CVA interface does not provide ANY way how to get information about status changes (it can only react to ValueChanges - writevalue and disabled changes - setDisabled), there is not anything like setValid(), setTouched() pristine etc.

• You can get ngControl from injector (because CVA is solving only 20% of domain...) .Control has now "unified events api" https://angular.dev/api/forms/AbstractControl#events unfortunately, it is preserved when {emitEvent: false} during the method calls

• It is EVEN BIGGER Problem as far as disabled control has BOTH valid and invalid SET TO FALSE (lol), so you just DO NOT HAVE ANY way how to get any information about the state of validity, when your control is enabled with {emitEvent:false} (check source code below)

• it is so sad that the only way how to get 100% information about control state is to LISTEN for DOM mutation on Host element (to read ng-invalid, ng-valid, ng-pending, ng-prisitine, etc. classes)

• the same problem when validity of the control changes when the new value is set - you have NO WAY how to get the new valid / invalid status when user patch/set value with emitEvent: false. You cannot even handle this inside of writeValue() because validators are executed after that.... So not any workaround..

FORCING user not to use {emitEvent:false } which is his way to prevent emiting valueChanges "ON THE OUTSIDE SIDE" - aka. consumer of the component (in bigger form) is definitely not a solution to this problem, where Component creator has not any legit way how to get state of the control.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

import { FormControl, PristineChangeEvent, ReactiveFormsModule, StatusChangeEvent, TouchedChangeEvent} from '@angular/forms';
import {  bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule, CommonModule],
  template: `
    <input type="number"  [formControl]="number"/>
    Valid: {{number.valid}}
    Invalid: {{number.invalid}}
    Errors: {{number.errors | json}}

    <button (click)="number.enable({emitEvent: false})">ENABLE</button>
    <hr/>
    Problems:
    <ul>
      <li>Disabled input has both VALID and INVALID set TRUE - eventhogh there is no validator and it NO ERRORS</li>
      <li>When you enable control - it is now valid, but NO events is fired from Control.Events</li>
    </ul>

    <hr/>
    Events: 
    <ul>
    @for(event of events; track $index) {
       <li>{{event | json}}</li>
    }
  </ul>
  `,
})
export class App {

  events: any[] =[]; 
  number = new FormControl();



  ngOnInit( ){
    this.number.disable();
    this.number.events.subscribe(e=> {
      if (e instanceof StatusChangeEvent) {
        this.events.push("Status - " + e.status);
      } else if (e instanceof TouchedChangeEvent) {
        this.events.push("Touched - "+ e.touched);
      } else if (e instanceof PristineChangeEvent) {
        this.events.push("Pristine - "+ e.pristine);
      }
    }
    );
  }
}

bootstrapApplication(App);

Proposed solution

• more methods in CVA interface
• event emitter on AbstractControl which emits everytime, regardless the emitEvent settings

Alternatives considered

• our only WAY how to solve this is to write our own AbstractControl's implementations (inherit the base ones from angular) and to add additional event emiiters...
• in this case where is the main problem the valid/invalid state of control, you can "rebind" your internal valid/invalid/pristine/touched state when setDisabled() of CVA is called.
• in case of changed valid/invalid state when the new value is set to control with emitEvent:false, there is not any way except to "queue" sync check after "writeValue"

Just sad state.

[montella1507]

https://github.com/angular/angular/blob/main/packages/forms/src/directives/ng_control_status.ts

This Is part of angular setting statuses to DOM.. IT Is based on dirty checking (getters and rerendering).

So Even Angular framework itself does not know how to track control statuses correctly....

[RobbyRabbitman]

I also noticed that the events observable on the FormGroup instance of a NgForm does not emit FormResetEvent or FormSubmittedEvent events. My use case is a angular wrapper for a web component and the only reliable solution for tracking the state of a control is by observing the DOM manipulated by NgControlStatusGroup and NgControlStatus.

Here the version that does not work:

import { contentChild, Directive, ElementRef, inject } from '@angular/core';
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
import {
  FormGroupDirective,
  FormResetEvent,
  FormSubmittedEvent,
  NgControl,
  NgForm,
  PristineChangeEvent,
  StatusChangeEvent,
  TouchedChangeEvent,
} from '@angular/forms';
import { type HdiFormField as HdiWebFormField } from '@hdi-components/hdi-web-components-form-field';
import { distinctUntilChanged, EMPTY, map, merge, switchMap, tap } from 'rxjs';

/** Make sure to import the web component */
import '@hdi-components/hdi-web-components-form-field';

@Directive({
  selector: 'hdi-form-field',
  standalone: true,
})
export class HdiFormField {
  /** The host element of this directive. */
  readonly element =
    inject<ElementRef<HdiWebFormField>>(ElementRef).nativeElement;

  protected readonly ngControl = contentChild(NgControl);

  protected readonly ngForm = inject(NgForm, { optional: true });

  protected readonly formGroupDirective = inject(FormGroupDirective, {
    optional: true,
  });

  /**
   * This observable ensures that the `hdi-form-field` state represents the
   * state of the form control.
   */
  protected readonly useFormControlState$ = toObservable(this.ngControl).pipe(
    map((ngControl) => ngControl?.control),
    distinctUntilChanged(),
    switchMap((control) => {
      if (!control) {
        this.element.validationMode = 'control-based';
        this.element.forceValidation = false;
        return EMPTY;
      }

      this.element.validationMode = 'custom';
      // angular adds `noValidate` to the form element, because it has its own validation mechanism, so we need to force validation because the web component has native validation
      this.element.forceValidation = true;

      // TODO: does not emit for template driven forms aka NgForm
      const formControlContainerEvents = (
        formControlContainer: NgForm | FormGroupDirective | null,
      ) => {
        return (
          formControlContainer?.control.events.pipe(
            tap((formEvent) => {
              switch (true) {
                case formEvent instanceof FormResetEvent: {
                  this.element.submitted = false;
                  break;
                }

                case formEvent instanceof FormSubmittedEvent: {
                  console.log('FormSubmittedEvent', formEvent);

                  this.element.submitted = true;
                  break;
                }
              }
            }),
          ) ?? EMPTY
        );
      };

      return merge(
        control.events.pipe(
          tap((formEvent) => {
            switch (true) {
              case formEvent instanceof StatusChangeEvent: {
                this.element.invalid = formEvent.status === 'INVALID';
                break;
              }

              case formEvent instanceof PristineChangeEvent: {
                this.element.dirty = !formEvent.pristine;
                break;
              }

              case formEvent instanceof TouchedChangeEvent: {
                this.element.touched = formEvent.touched;
                break;
              }
            }
          }),
        ),
        formControlContainerEvents(this.ngForm),
        formControlContainerEvents(this.formGroupDirective),
      );
    }),
    takeUntilDestroyed(),
  );

  constructor() {
    this.useFormControlState$.subscribe();
  }
}

FormGroupDirective emits:

angular/packages/forms/src/directives/reactive_directives/form_group_directive.ts

Lines 314 to 323 in a36744e

	onSubmit($event: Event): boolean {
	this._submittedReactive.set(true);
	syncPendingControls(this.form, this.directives);
	this.ngSubmit.emit($event);
	this.form._events.next(new FormSubmittedEvent(this.control));
	// Forms with `method="dialog"` have some special behavior that won't reload the page and that
	// shouldn't be prevented. Note that we need to null check the `event` and the `target`, because
	// some internal apps call this method directly with the wrong arguments.
	return ($event?.target as HTMLFormElement | null)?.method === 'dialog';

NgForm does not emit:

angular/packages/forms/src/directives/ng_form.ts

Lines 337 to 344 in a36744e

	onSubmit($event: Event): boolean {
	this.submittedReactive.set(true);
	syncPendingControls(this.form, this._directives);
	this.ngSubmit.emit($event);
	// Forms with `method="dialog"` have some special behavior
	// that won't reload the page and that shouldn't be prevented.
	return ($event?.target as HTMLFormElement | null)?.method === 'dialog';
	}

Here is the version that works:

import { Directive, ElementRef, contentChild, inject } from '@angular/core';
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
import { NgControl } from '@angular/forms';
import { type HdiFormField as HdiWebFormField } from '@hdi-components/hdi-web-components-form-field';
import { mutationObservable } from '@hdi-components/web-js-util';
import { EMPTY, merge, startWith, switchMap, tap } from 'rxjs';

/** Make sure to import the web component */
import '@hdi-components/hdi-web-components-form-field';

@Directive({
  selector: 'hdi-form-field',
  standalone: true,
})
export class HdiFormField {
  /** The host element of this directive. */
  readonly element =
    inject<ElementRef<HdiWebFormField>>(ElementRef).nativeElement;

  /**
   * The element the `ngControl' directive within this form field is attached
   * to.
   */
  readonly ngControlElementRef = contentChild(NgControl, {
    read: ElementRef,
  });

  /**
   * This observable ensures that the `hdi-form-field` state represents the
   * state of the form control. It observes the classes of the element the
   * ngControl is attached to. There might be a more performant way to do this,
   * but this approach is safer than e.g. monkey patching the directive, cuz we
   * don't want to be dependent on private implementation details of Angular,
   * but rather on a public api.
   *
   * NOTE: NgControlStatusGroup and NgControlStatus are responsible for setting
   * the classes we are observing - maybe they have a signal based api in the
   * future. However tracking the control state is not trivial - see
   * https://github.com/angular/angular/issues/57972
   *
   * For now we have to stick like angular is doing it: observing the DOM.
   *
   * In the future the `events` observable of the form control might be
   * suitable.
   *
   * @see {@link https://angular.dev/guide/forms/form-validation#control-status-css-classes}
   */
  protected readonly useNgFormState$ = toObservable(
    this.ngControlElementRef,
  ).pipe(
    switchMap((ngControlElementRef) => {
      // If there is no form directive, the validation state should be controlled by the web component.
      if (!ngControlElementRef) {
        this.element.validationMode = 'control-based';
        this.element.forceValidation = false;
        return EMPTY;
      }

      const ngControlElement = ngControlElementRef.nativeElement as HTMLElement;

      // We set the validation mode to custom and force validation, because we want to propagate the validation state of the form directive to the web component.
      this.element.validationMode = 'custom';
      this.element.forceValidation = true;

      const form = ngControlElement.closest('form');

      const hasNgStateClass = (
        element: HTMLElement,
        state:
          | 'valid'
          | 'invalid'
          | 'pending'
          | 'pristine'
          | 'dirty'
          | 'untouched'
          | 'touched'
          | 'submitted',
      ) => {
        return element.classList.contains(`ng-${state}`);
      };

      return merge(
        // invalid, dirty, touched state
        mutationObservable(ngControlElement, {
          attributes: true,
          attributeFilter: ['class'],
        }).pipe(
          startWith('some value to set the initial state'),
          tap(() => {
            this.element.invalid = hasNgStateClass(ngControlElement, 'invalid');
            this.element.dirty = hasNgStateClass(ngControlElement, 'dirty');
            this.element.touched = hasNgStateClass(ngControlElement, 'touched');
          }),
        ),
        // submitted state
        form
          ? mutationObservable(form, {
              attributes: true,
              attributeFilter: ['class'],
            }).pipe(
              startWith('some value to set the initial state'),
              tap(() => {
                this.element.submitted = hasNgStateClass(form, 'submitted');
              }),
            )
          : EMPTY,
      );
    }),
    takeUntilDestroyed(),
  );

  constructor() {
    this.useNgFormState$.subscribe();
  }
}

[montella1507]

Yeah, the only possible way how to track changes is mutation observer on host element to track class changes. However it is based on change tracking. There are getters in that directive so if the change tracking is not triggered for any reason, there is not any way.

It is hard to believe reactive forms and CVA is here for 8 years and it cannot be used correctly - core of the framework.

Someone suggested to write own "wrapper" of reactive forms to make it possible, sad.

[montella1507]

OK, so angular team dont care core component (reactive forms) are not usable for not-super-simple scenarios.

Sad. Time to leave reactive forms.

[RobbyRabbitman]

@montella1507 they announced in their roadmap for 2025 a signals integration in the forms package - maybe they expose these states as signals

[montella1507]

They use signals internally already in the forms. Those ugly statuses / getters are consuming internal signals

From my point of view.. current reactive forms is something that should be deprecated, not class based guards etc.

There are thousands of issues with reactive forms. They are full of nonsense etc.