How to set up Angular Reactive Forms with Signals

I have set up a formbuilder with a number of inputs components, each of which uses a control value accessor mixin. Where I've got to is that the input components render OK, the user inputs trigger the updateValue function in the control value accessor OK, but try as i may I can't fugure out how to propogate the change up to the form builder via the reactive form. Here's a few code snippets to show you what I mean.

The input component uses this to trigger the onChange:

// template
(ionChange)="onValueUpdate($event)"

// ts
onValueUpdate(event: Event) {
// console.log('Event Fired:', event); // works fine
const newValue = (event.target as HTMLInputElement).value.trim();
this.updateValue(newValue);
}


This fires the updateValue function in the control value accessor mixin fine:

updateValue(value: any): void {
console.log(`monkey control Value accessor updateValue. value = ${value}.`);
this.value.set(value || ''); // Use signal's `.set()` method. N.B. never null / undefined
this._onChange(value);
this._onTouched();
}


But this is where I get stuck. I am unable to see these changes in the form builder, which is the parent to this compoenent. I suspect it is something to do with how I am creating the formGroup and how I am reacting to changes...

fields = input<FormField[]>([]); // Reactive signal for fields

/** COMPUTED */
rows = computed(() => this.computeFieldRows(this.fields()));
formGroup = computed(() => this.computeFormGroup(this.fields()));

constructor()
{
// Log the form state whenever it updates.
effect(() => {
console.log('Form Group Changed:', this.formGroup().value);
});
}



/**
* Compute formGroup & formControls
*/
private computeFormGroup(fields: FormField[]): FormGroup {
const formGroup = new FormGroup({});
console.dir(fields);
this.fields().forEach((field) => {
console.log(field);
if (!formGroup.contains(field.key)) {
const control = new FormControl(
field.value?? '', // Default / Initial value
field.options?.validators || [] // Validators from field options
);
formGroup.addControl(field.key, control);
}
});
console.log(formGroup);
return formGroup;
};


And for completeness, this is how the input components are added in the template:

@for (row of rows(); track row) {
<div class="form-row" [class]="getRowClass(row)">
@for (field of row; track field.key) {
<div>
@switch (field.monkeyComp.comp.name) {
@case ('monkey-input') {
<monkey-input
[monkeyInput]="field.monkeyComp"
[formControlName]="field.key"
(clicker)="onFieldClick(field.key, 'Clicker!', $event)"
></monkey-input>
}

Continue reading...