Angular computed signal not reflecting changes when input signal changes

I am using Angular signals with Reactive Forms and facing an issue where the hasFormControlError and validations computed signals are not updating the view when the formControl input signal value changes. I am passing reactive form control instances in the formControl signal input,

The issue here is computed signals reflecting updates in the view only when submitted, but if the control is dirty, invalid at the time of key press, even the errors object nothing is reflecting in the view by the computed signals.

However, if I change them to getters, they work fine and reflecting everything. I am unable to understand why this is happening what i am doing wrong here.

Stackblitz - https://stackblitz.com/edit/stackblitz-starters-ur795u?file=src/main.ts

This is how i am passing the form control instance from parent

<form-control [form-control]="formControls()['email']"></form-control>


import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { fadeAnimation } from '@shared/animations';
import { generateNumericId } from '@shared/utilities';
import { AbstractControl, FormControl } from '@angular/forms';
import { FormControlValidationService } from '../../services';
import { IControlConfig, IFormControlValidation } from '../../models';
import { Component, computed, inject, input, output } from '@angular/core';

@Component({
standalone: true,
selector: 'form-control',
animations: [fadeAnimation],
imports: [CommonModule, FormsModule],
styleUrl: './form-control.component.css',
providers: [FormControlValidationService],
templateUrl: './form-control.component.html'
})
export class FormControlComponent {
private _validationService = inject(FormControlValidationService);


public formControl = input.required<AbstractControl | FormControl>({
alias: 'form-control',
});


public controlConfig = input({}, {
alias: 'control-config',
transform: (value: IControlConfig) => {
return {
isRequired: true,
showErrorMessages: true,
...value
};
}
});



public hasFormControlError = computed<boolean>(() => {
return !!(
(this.formControl().invalid && this.formControl().dirty) ||
(this.controlConfig().submitted && this.formControl().errors)
);
});


public validations = computed<IFormControlValidation[]>(() => {
return Object.keys(this.formControl().errors || {}).map((key) => {
const validationError = {
errorType: key,
errorMessage: '',
id: generateNumericId(),
formControl: this.formControl(),
error: this.formControl().errors?.[key]
};

validationError['errorMessage'] =
this._validationService.getControlErrorMessage(validationError);

return validationError;
});
});


}

Continue reading...