Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

question: Errors never updated ? #276

Open
Yohandah opened this issue Apr 13, 2022 · 1 comment
Open

question: Errors never updated ? #276

Yohandah opened this issue Apr 13, 2022 · 1 comment
Labels

Comments

@Yohandah
Copy link

Yohandah commented Apr 13, 2022

Hello @MrWolfZ , Thanks for the amazing lib,

I have a problem with the validation, I'm trying to implement really basic validation, using the docs and the examples in the repo but I don't understand how it works. Maybe because I'm using the "new" ngrx syntax with functions.

My reducer is the following :

import { ActionReducer, createReducer } from '@ngrx/store';
import {
  createFormGroupState,
  FormGroupState,
  onNgrxForms,
  updateGroup,
  validate,
} from 'ngrx-forms';
import { required } from 'ngrx-forms/validation';

export const featureKey: string = 'myForm';
const formId: string = 'myForm';

export interface MyForm {
  myField: string | undefined;
}

export interface MyFormState {
  someOtherField: string;
  myForm: FormGroupState<MyForm>;
}

const initialFormState: FormGroupState<MyForm> = updateGroup<MyForm>(
  createFormGroupState<MyForm>(formId, {
    primaryPole: undefined,
  }),
  {
    primaryPole: validate(required),
  },
);

const initialState: MyFormState = {
  someOtherField: '',
  myForm: initialFormState,
};

export const formReducer: ActionReducer<FpdaFormState> = createReducer(initialState, onNgrxForms());

I created the validators as said in the FAQ (https://ngrx-forms.readthedocs.io/en/master/faq/) combining the declaration of the validators and the creation of the form. But no matter what I type in my input it's always in error, also I can't seem to find the interface of the error object.

From what I've searched in this repo issues I think I should call the validators inside my reducer but I can't seem to find examples that uses createReducer() function. Can't find inside the doc as well

Can you help ?

@Yohandah Yohandah added the bug label Apr 13, 2022
@Yohandah
Copy link
Author

Yohandah commented Apr 13, 2022

Okay I've finally suceeded but I think the docs need a good refresh with the usage of the new NgRx syntax.
I can help if you give me directions, I think the doc could use at least the description of the full API with the JS Doc included, for the sake of discoverability.

I have found https://github.com/MrWolfZ/ngrx-forms/blob/master/example-app/src/app/simple-form-ngrx8/simple-form-ngrx8.reducer.ts (but not right away as I did not know where to search) and it's not using wrapReducerWithFormStateUpdate

my reducer in case someone needs :

import { ActionReducer, createReducer } from '@ngrx/store';
import {
  createFormGroupState,
  FormGroupState,
  onNgrxForms,
  updateGroup,
  validate,
  wrapReducerWithFormStateUpdate,
} from 'ngrx-forms';
import { required } from 'ngrx-forms/validation';

export const fpdaFormFeatureKey: string = 'fpdaForm';
const formId: string = 'fpdaForm';

export interface FpdaForm {
  primaryPole: string | undefined;
  secondaryPole: string | undefined;
  wording: string | undefined;
  fpdaType: string | undefined;
  purchaseType: string | undefined;
  amount: number | undefined;
  validationDateGAM: Date | undefined;
  validationDateCPA: Date | undefined;
  daNUmber: number | undefined;
}

export interface FpdaFormState {
  someOtherField: string;
  fpdaForm: FormGroupState<FpdaForm>;
}

const initialFormState: FormGroupState<FpdaForm> = createFormGroupState<FpdaForm>(formId, {
  primaryPole: undefined,
  secondaryPole: undefined,
  wording: undefined,
  fpdaType: undefined,
  purchaseType: undefined,
  amount: undefined,
  validationDateGAM: undefined,
  validationDateCPA: undefined,
  daNUmber: undefined,
});

const formValidators: (
  formState: FormGroupState<FpdaForm>,
  state: FpdaFormState,
) => FormGroupState<FpdaForm> = updateGroup<FpdaForm>({
  primaryPole: validate(required),
  wording: validate(required),
  fpdaType: validate(required),
  purchaseType: validate(required),
  amount: validate(required),
  validationDateGAM: validate(required),
  validationDateCPA: validate(required),
});

const initialState: FpdaFormState = {
  someOtherField: '',
  fpdaForm: initialFormState,
};

const reducer: ActionReducer<FpdaFormState> = createReducer(initialState, onNgrxForms());
export const formReducer: ActionReducer<FpdaFormState> = wrapReducerWithFormStateUpdate(
  reducer,
  (s: FpdaFormState) => s.fpdaForm,
  formValidators,
);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant