`NgxControlValueAccessor` value is `undefined` in `ngOnInit` and `ngAfterViewInit`

[wizardnet972]

I'm using NgxControlValueAccessor in an Angular component to manage the value of a custom input field. However, I am unable to access the value in the ngOnInit and ngAfterViewInit lifecycle hooks. The value is always undefined when I try to log it in these hooks.

Here is the code I have implemented:

import { Component, inject } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { NgxControlValueAccessor } from 'ngxtension/control-value-accessor';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
console.clear();

@Component({
  selector: 'custom-input',
  hostDirectives: [NgxControlValueAccessor],
  template: `
    <label>
      <b>Custom label</b>
      <input
        type="text"
        (input)="cva.value = $event.target.value"
        [value]="cva.value$()"
        [disabled]="cva.disabled$()"
        (blur)="cva.markAsTouched()"
      />
    </label>
  `,
  standalone: true,
})
export class CustomInput {
  protected cva = inject<NgxControlValueAccessor<string>>(
    NgxControlValueAccessor
  );

  ngOnInit() {
    console.log({ ngOnInit: this.cva.value }); // undefined
  }

  ngAfterViewInit() {
    console.log({ ngAfterViewInit: this.cva.value }); // undefined
  }
}

@Component({
  selector: 'app-root',
  imports: [CustomInput, FormsModule, ReactiveFormsModule],
  template: `
    <custom-input [(ngModel)]="foo" />
  `,
})
export class App {
  name = 'Angular';

  foo = 'hello';
}

bootstrapApplication(App);

Steps to Reproduce:

1. Clone the [stackblitz project](https://stackblitz.com/edit/stackblitz-starters-mnbvmheo?file=src%2Fmain.ts).
2. Check the ngOnInit and ngAfterViewInit logs in the CustomInput component.
3. The value of cva.value is undefined in both lifecycle hooks.

Expected Behavior:

I would expect the value of cva.value to be available in ngOnInit or ngAfterViewInit, or that Angular provides a way to access it within these hooks.

Additional Information:

• The cva.value should reflect the value bound to the [(ngModel)] in the parent component.
• cva is injected correctly, but the value isn't accessible during the initialization lifecycle.

Possible Workaround:

Are there any specific lifecycle hooks or techniques for retrieving the value in ngOnInit or ngAfterViewInit?

[wizardnet972]

On the other hand, the value doesn’t exist even when using ControlValueAccessor — it only appears in the onChange function.
So I believe this can’t be achieved through this library either.
Feel free to close this unless there’s a solution for it — would be great if there is

[jdegand]

This is expected behavior. Even with Reactive Forms, cva.value will be undefined in ngOnInit. The order of execution in Angular explains it.

I haven't looked at CVA with the new signal forms, but I'd imagine you'd use an effect or a computed like you could do now to update the initial value quicker.

[jdegand]

With signal-based forms, you can use a model signal and implement streamlined interfaces like FormValueControl—plus a separate one for checkboxes—requiring only a single value definition.