MrWolfZ / ngrx-forms

Enhance your forms in Angular applications with the power of ngrx

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

FormArrayState, the state doesn't update when SetValueActions are disptached

achraf-elk opened this issue · comments

As l input values to my form I can see the SetValueActions dispatched with the redux dev tools, the action contains the correct value and array index id. but the state doesn't get updated

My setup

Reducer:

export const creationCommandeFeatureKey: string = 'creationCommande';

export interface CommandCreationForm {
  numeroCommande: number | undefined;
  Boxed<FormArrayState<CommandPoste>;
}

export interface CommandCreationFormState {
  commandCreationForm: FormGroupState<CommandCreationForm>;
}

export const initialCommandPostsArrayForm: FormArrayState<CommandPoste> =
  createFormArrayState<CommandPoste>('commandPostsArrayForm', [
    {
      montant: undefined,
    },
  ]);

export const initialCommandCreationForm: FormGroupState<CommandCreationForm> =
  createFormGroupState<CommandCreationForm>('initialCommandCreationForm', {
    numeroCommande: undefined,
    posts: initialCommandPostsArrayForm,
  });

export const initialState: CommandCreationFormState = {
  commandCreationForm: initialCommandCreationForm,
};

export const commandCreationReducer: ActionReducer<CommandCreationFormState> = createReducer(
  initialState,
  onNgrxForms(),
))

Template:

<form [ngrxFormState]="createCommandeForm">
// rest of the form ...
<div>
       <div
         *ngFor="
           let arrayForm of createCommandeForm.controls.posts.value.value.controls;
           let first = first;
           let i = index
         "
       >
           <div>
             <span class="input-label">input*</span>
             <sds-input
               class="input"
               type="date"
               size="s"
               ngDefaultControl
               [ngrxFormControlState]="getFormControl(arrayForm).dateDebut"
             ></sds-input>
           </div>
</form>

Component:

in my component I am using the following method to properly cast the controls returned from the formArray

  getFormControl(control: FormState<CommandPoste>): FormGroupControls<CommandPoste> {
    return (control as unknown as FormGroupState<CommandPoste>).controls;
  }

Expected behavior
the state should be updated when the setValueAction is dispached

Screenshots
as i input a value in the form, the actions are correclty dispatched
image
but the state is still empty:
image

Library version:
8.0.0