Help with setup formArray with validation

[peterhe2000]

Hi. There. First , thanks for the awesome library. I do like the fact the library build with pure function which angular native form is not. I am in a POC stage of a project which use a lot of angular form array. I am trying to get my head around how to use ngrx-form library.

Requirement is:

1. Need be a form array.
2. Need be able to validate two fields in form array.

Here are code i come up so far. I am not sure whether i am on the right track. Could someone point me to the right direction in validation part? I got idea from https://ngrx-forms.readthedocs.io/en/master/user-guide/updating-the-state/

export interface MyFormArrayValue {  
  memberNumber: string | null; // required
  amount: number | null; // required, greater than 0
}

export interface MyFormValue { 
  someNumbers: MyFormArrayValue[];
}

export interface AppState {
  myForm: FormGroupState<MyFormValue>;
}

const FORM_ID = 'some globally unique string';

const initialFormState = createFormGroupState<MyFormValue>(FORM_ID, {
  someNumbers: [],
});

const initialState: AppState = {
  myForm: initialFormState,
};

const validateAndUpdateFormState = updateGroup<MyFormValue>({
  // TODO: validate form array
  });

const myFormReducer = createFormStateReducerWithUpdate<MyFormValue>(validateAndUpdateFormState);

export function appReducer(state = initialState, action: Action): AppState {
  const myForm = myFormReducer(state.myForm, action);
  if (myForm !== state.myForm) {
    state = { ...state, myForm };
  }

  switch (action.type) {
    case 'some action type':
      // modify state
      return state;

    default: {
      return state;
    }
  }
}

[dzonatan]

Read about updating-arrays and validation:

const validateAndUpdateFormState = updateGroup<MyFormValue>({
  someNumbers: updateArray(updateGroup({
    memberNumber: validate(required),
    amount: validate(required, greaterThan(0)),
  }))
});

Everything else you pointed looks standard.

[peterhe2000]

Thanks @dzonatan for prompt reply. I tried your suggestion. I got compile error in following.

const validateAndUpdateFormState = updateGroup<MyFormValue>({
  someNumbers: updateArray({
    memberNumber: validate(required), // compile error
    amount: validate(required, greaterThan(0)),
  })
});

[dzonatan]

Sorry. Missed updateGroup inside updateArray. (I'm writing this straight from my head)

const validateAndUpdateFormState = updateGroup<MyFormValue>({
  someNumbers: updateArray(
    updateGroup({
      memberNumber: validate(required),
      amount: validate(required, greaterThan(0)),
    })
  ),
});

[peterhe2000]

@dzonatan That works. I can keep on my POC now. Appreciated for the help.

[MrWolfZ]

Thanks @dzonatan for helping out.

@peterhe2000 I you encounter any more difficulties during your POC please don't hesitate to open a new issue.

[peterhe2000]

@MrWolfZ Will do.