Ngrx-forms validation not working

[ernestoacosta75]

Good afternoon,
I'm writing you because few days ago I started to go deep using ngrx-forms and everything works fine till I tried to manage the validation. I tried all the things but is not working and this is my use case.
I have this actors.reducer.ts file with this content:
import { Action, createFeature, createReducer, on } from "@ngrx/store";
import { ActorDto } from "../../types/actor/actor-dto";
import * as ActorActions from 'src/app/store/actor/actors.actions';
import { createFormGroupState, createFormStateReducerWithUpdate, FormGroupState, onNgrxForms, onNgrxFormsAction, SetValueAction, updateGroup, validate } from "ngrx-forms";
import { required, greaterThanOrEqualTo, minLength } from 'ngrx-forms/validation';

export interface ActorFormValue {
id?: string;
name: string;
dateOfBirth?: any;
picture?: string | File;
}

const updateFormState = updateGroup({
name: validate((value) => {
console.log('Validating Name:', value);
return required(value);
}),
});

export const formReducer = createFormStateReducerWithUpdate(updateFormState);

const initialActorFormState = createFormGroupState(
'actorForm',
{
id: null,
name: '',
dateOfBirth: ''
}
);

interface State {
actors: ActorDto[];
actorForm: FormGroupState;
actorImg: string;
loading: boolean;
errors: string[] | null;
}

export const initialState: State = {
actors: [],
actorForm: initialActorFormState,
actorImg: null,
loading: false,
errors: null
};

// With CreateFeature, the feature name and reducer are passed to it

export const actorsFeature = createFeature({
name: 'actors',
reducer: (state: State | undefined, action: Action) => {
// Call the main reducer first
const baseReducer = createReducer(
initialState,
onNgrxForms(), // Handle ngrx-forms actions automatically
onNgrxFormsAction(SetValueAction, (state, action) => {
console.log('Ngrx Forms Action:', action);
return state;
}),
// Actors list
on(ActorActions.loadActors, (state) => ({
...state,
loading: true,
errors: []
})),
on(ActorActions.loadActorsSucess, (state, { actors }) => ({
...state,
actors,
loading: false
})),
on(ActorActions.loadActorsFailure, (state, { errors }) => ({
...state,
errors,
loading: false
})),
// Other actions (add, update, delete actors)
// ...
)(state, action); // Apply the base reducer

    console.log('Before formReducer:', baseReducer.actorForm);

    const updatedActorForm = formReducer(baseReducer.actorForm, action);

    console.log('After formReducer:', updatedActorForm);

    // Integrate the formReducer to update the form state
    return {
        ...baseReducer,
        actorForm: updatedActorForm // formReducer(baseReducer.actorForm, action) // Ensure correct form reducer
    };
}

});
then i have an actor-form.component.ts file with this content and this template:
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { ActorDto } from '@models/actor/actor-dto';
import { FormBuilder, FormGroup } from '@angular/forms';
import { DateAdapter } from '@angular/material/core';
import { filter, map, Observable, Subscription, take } from 'rxjs';
import { EventService } from 'src/app/event-service';
import { Router } from '@angular/router';
import { select, Store } from '@ngrx/store';
import { ActorFormValue, actorsFeature } from '@store/actor/actors.reducer';
import * as ActorActions from '@store/actor/actors.actions';
import * as ActorSelectors from '@store/actor/actors.selectors';
import { FormGroupState, NgrxValueConverters } from 'ngrx-forms';
import { base64ToFile, toConsole } from '@shared/utilities/common-utils';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';

@component({
selector: 'app-actor-form',
templateUrl: './actor-form.component.html',
styleUrls: ['./actor-form.component.css']
})
export class ActorFormComponent implements OnInit, OnDestroy {

@input()
model: ActorDto;

@input()
action: string;

actorForm$: Observable<FormGroupState>;
dateValueConverter = NgrxValueConverters.dateToISOString;
loading$!: Observable;
vm$ = this.store.select(ActorSelectors.selectActorsListViewModel);
form: FormGroup;
archiveSelectedEvt: string = '';
imageChanged: boolean = false;
actorsSubscription: Subscription = new Subscription();

constructor(private formBuilder: FormBuilder, private dateAdapter: DateAdapter,
private eventService: EventService,
private router: Router, private store: Store) {
this.dateAdapter.setLocale('en-GB');
this.actorForm$ = this.store.select(ActorSelectors.selectActorForm);
}
ngOnInit(): void {

// Initialize the form group

if (this.model !== undefined) {
  this.form.patchValue(this.model);
}

// Selecting loading state
this.loading$ = this.store.select(actorsFeature.selectLoading);

}

onDateChange(event: MatDatepickerInputEvent) {
const date = event.value;
const dateString = date.toISOString().split('T')[0];
this.store.dispatch(ActorActions.updateDateOfBirth({ date: dateString }));
}

onSave = () => {
this.actorForm$
.subscribe(formState => {
if(formState.isValid) {
console.log('Actor form is valid');
}
else {
console.log('Actor form is not valid');
// Mark all fields as touched to trigger validation messages
Object.keys(formState.controls).forEach(controlName => {
const control = formState.controls[controlName];
control.touched = true; // Set touched to true
});
}
});
/*
this.actorForm$
.subscribe(formState => {
if(formState.isValid) {
const actor = formState.value;
let updateActorPayload = { ...actor, id: actor?.id };

    if(actor?.id) {  
      this.vm$
      .pipe(
        take(1),
        map(vm => vm.actorImg),
      )
      .subscribe(fileBase64Str => {
        if (fileBase64Str && fileBase64Str.startsWith('data:')) {
          const file = base64ToFile(fileBase64Str, updateActorPayload.name.concat('_image.png'));
          updateActorPayload = { ...actor, id: this.model.id, picture: file };              
        }
        this.store.dispatch(ActorActions.updateActor({ id: actor?.id, actor: updateActorPayload }));
      });
    }
    else {
      this.store.dispatch(ActorActions.addActor({ actor }));
    }
  }
  else {
    // Mark all fields as touched to trigger validation messages
    // Object.keys(formState.controls).forEach(controlName => {
    //   const control = formState.controls[controlName];
    //   // control.touched = true; // Set touched to true
    // });
  }
});*/

}

ngOnDestroy(): void {
this.actorsSubscription.unsubscribe();
this.store.dispatch(ActorActions.resetActorForm());
}
}

<ng-container *ngIf="actorForm$ | async as formState">
<form class="form" [ngrxFormState]="formState" (submit)="onSave()">

Name
<input [ngrxFormControlState]="formState.controls.name" matInput required placeholder="Ex.: Drama">



<div *ngIf="formState.controls.name.errors?.required">
Name is required.

    <mat-form-field appearance="outline">
        <mat-label appAddRequired>Birth date</mat-label>
        <input [ngrxFormControlState]="formState.controls.dateOfBirth" [ngrxValueConverter]="dateValueConverter" matInput [matDatepicker]="birthDatePicker" required>
        <mat-datepicker-toggle matSuffix [for]="birthDatePicker"></mat-datepicker-toggle>
        <mat-datepicker #birthDatePicker></mat-datepicker>
        <!-- <mat-error app-error-message [control]="form.get('dateOfBirth')!"></mat-error> -->
    </mat-form-field>   
    <!-- 
    <pre>{{ formState.value.picture }}</pre>
    <app-input-img [currentImageUrl]="formState.value.picture" [actorId]="formState.value.id"></app-input-img>

    <app-input-markdown [markdownContent]="formState.value.biography"></app-input-markdown> -->

    <div>
        <button 
            mat-flat-button 
            color="primary" 
            type="submit"
            [disabled]="formState.invalid">Save</button>

        <a mat-stroked-button class="button-form" routerLink="/actors">Cancel</a>
    </div>        
</form>

My form is loaded fine, but when I'm in the name field and I leave it without entering any value, when i go to inspect the Redux tab in Chrome to see my state, there are not any validation errors regarding the name field.
Would you be kind to help me with this issue, please?

Thanks in advance and I will be waiting for your feedback.

Best regards,

Ernesto.

[timdeschryver]

ngrx-forms is not a part of the NgRx org.