Using NgxControlValueAccessor with [field] causes ERROR RuntimeError: NG0950: Input "field" is required but no value is available yet

[ptandler]

I'm experimenting with the new signal forms and tried using a component implemented with NgxControlValueAccessor with the new [field] directive. Using the custom control component with [field] I get

ERROR RuntimeError: NG0950: Input "field" is required but no value is available yet

From what I see in the stack, it seems that NgxControlValueAccessor.initialValue() calls the InteropNgControl.value and this fails because there is no value yet set to the directive's field input.

Not sure if this should be fixed here or in the [field] directive.

Example available at
https://stackblitz.com/~/github.com/ptandler/angular-signal-form-value-control-reactive-form-interop?file=src/main.ts

export interface Test {
  stringValue: string;
  numberValue: number;
}

@Component({
  selector: 'custom-form-value-control',
  template: ` <div style="border: gray solid 2px">
    <input type="text" [field]="valueForm.stringValue" />
    <input type="number" [field]="valueForm.numberValue" />
  </div>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [Field],
  hostDirectives: [NgxControlValueAccessor],
})
export class CustomControlComponent {
  protected readonly cva = inject(NgxControlValueAccessor<Test>);
  protected readonly valueForm = form(this.cva.value$, {
    name: 'CustomControlComponent Form',
  });
  constructor() {
    console.log('CustomControlComponent.valueForm', this.valueForm());
  }
}

@Component({
  selector: 'app-root',
  template: `
    <h4>Field {{ value() | json }}</h4>
    <!-- When I comment the next line, everything works fine. -->
    <custom-form-value-control [field]="valueForm" /><br />
    <h4>FormControl {{ formControlValue() | json }}</h4>
    <custom-form-value-control [formControl]="formControl" /><br />
  `,
  imports: [ReactiveFormsModule, JsonPipe, CustomControlComponent, Field],
})
export class App {
  // for usage with [field]
  public readonly value = signal<Test>({ stringValue: 'hi!', numberValue: 42 });
  public readonly valueForm = form(this.value, { name: 'App Form' });

  // for usage with [formControl]
  public readonly formControl = new FormControl<Test>(
    {
      stringValue: 'ho?',
      numberValue: 17,
    },
    { nonNullable: true },
  );
  protected readonly formControlValue = toSignal(this.formControl.valueChanges);
}

[ptandler]

The exception is thrown during creation of the CVA:

• initialValue() is called to initialize the signal
• initialValue() calls ngControl.value
• This reads the field input of the field directive
• And this has not been set yet.

class NgxControlValueAccessor {
  constructor() {
    this.ngControl = inject(NgControl, {
      self: true,
      optional: true
    });
    this.initialValue = () => {
      if (this.ngControl != null) return this.ngControl.value;
      return injectCvaDefaultValue();
    };
    /** The value of this. If a control is present, it reflects it's value. */
    this.value$ = signal(this.initialValue(), {
      equal: (a, b) => this.compareTo(a, b)
    });

My first try would be to simply catch this exception and see if the CVA is updated once the field input is initialized.

[ptandler]

It works, if I simply catch exceptions during initialization... not nice of course.

Is there any official way to get the status of the control, to check if the inputs have been initialized?

export class NgxControlValueAccessor<T = any> implements ControlValueAccessor {
  //...
  private initialValue(): T {
    if (this.ngControl != null) {
      try {
        return this.ngControl.value;
      } catch {}
    }
    return injectCvaDefaultValue();
  }

  private initialDisabled(): boolean {
    if (this.ngControl != null) {
      try {
        return this.ngControl.disabled ?? false;
      } catch {}
    }
    return false;
  }

  public readonly value$ = signal(this.initialValue(), {
    equal: (a, b) => this.compareTo(a, b),
  });

  public readonly disabled$ = signal(this.initialDisabled());
  //...
}

See also branch ngx-cva-fix in the repo and patched NgxCVA there.

[JeanMeche]

Is there any official way to get the status of the control, to check if the inputs have been initialized?

Modern reactivity would delay input reads until init is done. Might be worth trying to replace the signal with a linkedSignal.

[ptandler]

Modern reactivity would delay input reads until init is done.

Well, yes, however, I expect that the NgxCVA should still work with reactive and template-driven forms as well.

Might be worth trying to replace the signal with a linkedSignal.

Ah, interesting, this delays the initialization of the signal, see https://github.com/ptandler/angular-signal-form-value-control-reactive-form-interop/tree/ngx-cva-fix-with-linked-signal/src

Could this cause any unintended side-effects? What would happen if the InteropNgControl's signals change (during initialization) and at the same time NgxControlValueAccessor's logic also updates the signal? Could this cause race-conditions or duplicated evaluations?

export class NgxControlValueAccessor<T = any> implements ControlValueAccessor {
  //...
  private readonly initialValue = (): T => {
    if (this.ngControl != null) return this.ngControl.value;
    return injectCvaDefaultValue();
  };

  private readonly initialDisabled = (): boolean => {
    if (this.ngControl != null) return this.ngControl.disabled ?? false;
    return false;
  };

  public readonly value$ = linkedSignal(this.initialValue, {
    equal: (a, b) => this.compareTo(a, b),
  });

  public readonly disabled$ = linkedSignal(this.initialDisabled);
  //...
}

[ptandler]

And this version avoids that the initialization is called again if the InteropNgControl's signals change using untracked.

  private readonly initialValue = (): T => {
    console.log('CVA initialValue');
    return untracked(() => {
      if (this.ngControl != null) return this.ngControl.value;
      return injectCvaDefaultValue();
    });
  };

  private readonly initialDisabled = (): boolean => {
    console.log('CVA initialDisabled');
    return untracked(() => {
      if (this.ngControl != null) return this.ngControl.disabled ?? false;
      return false;
    });
  };

I updated the GitHub branch.

Not sure, if we can really always rely that the inputs are set when the linkedSignals are initialized. How can we figure out?