How to use the ngrx-forms.updateGroup function in ngrx-forms

To help you get started, we’ve selected a few ngrx-forms examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github MrWolfZ / ngrx-forms / example-app / src / app / dynamic / dynamic.reducer.ts View on Github external
switch (a.type) {
    case CreateGroupElementAction.TYPE:
      return updateGroup({
        group: group => {
          const newGroup = addGroupControl(group, a.name, false);

          // alternatively we can also use setValue
          // const newValue = { ...group.value, [a.name]: false };
          // const newGroup = setValue(group, newValue);

          return newGroup;
        },
      })(s);

    case RemoveGroupElementAction.TYPE:
      return updateGroup({
        group: group => {
          const newValue = { ...group.value };
          delete newValue[a.name];
          const newGroup = setValue(group, newValue);

          // alternatively we can also use removeGroupControl
          // const newGroup = removeGroupControl(group, a.name);

          return newGroup;
        },
      })(s);

    default:
      return s;
  }
}
github MrWolfZ / ngrx-forms / example-app / src / app / local-state-advanced / local-state-advanced.reducer.ts View on Github external
export function reducer(oldState: LocalState = INITIAL_LOCAL_STATE, action: Action) {
  // each reducer takes care of its individual state
  let state = reducers(oldState, action);

  if (state === oldState) {
    return state;
  }

  // one overarching reducer handles inter-dependencies
  const formState = updateGroup({
    manufacturer: manufacturer => {
      if (!state.manufacturers.includes(manufacturer.value)) {
        return setValue('')(manufacturer);
      }
      return manufacturer;
    },
  })(state.formState);

  if (formState !== state.formState) {
    state = { ...state, formState };
  }

  return state;
}
github MrWolfZ / ngrx-forms / example-app / src / app / sync-validation / sync-validation.reducer.spec.ts View on Github external
      const setConfirmPasswordValue = (v: string) => updateGroup({ password: updateGroup({ confirmPassword: setValue(v) }) });
      const setCreateAccountValue = (v: boolean) => updateGroup({ createAccount: setValue(v) });
github barretodavid / ngrx-forms-example / src / app / store / config.reducer.ts View on Github external
import { updateGroup, validate } from 'ngrx-forms';
import { required, greaterThanOrEqualTo } from 'ngrx-forms/validation';

import { Config } from '../models';

export const initialConfigState = {
  minAge: 21,
};

export const configGroupValidation = updateGroup({
  minAge: validate([required, greaterThanOrEqualTo(0)]),
});
github MrWolfZ / ngrx-forms / example-app / src / app / sync-validation / sync-validation.reducer.ts View on Github external
password: (state, parentState) => {
    if (!parentState.value.createAccount) {
      return disable(state);
    }

    state = enable(state);
    state = validate(state, validatePasswordsMatch);
    return updateGroup(state, {
      password: validate(required, minLength(8)),
    });
  },
  agreeToTermsOfUse: validate(requiredTrue),
github barretodavid / ngrx-forms-example / src / app / store / person.reducer.ts View on Github external
import { updateGroup, validate } from 'ngrx-forms';
import { required } from 'ngrx-forms/validation';

import { Person } from '../models';

export const initialPersonState = {
  firstName: '',
  lastName: '',
  age: null,
};

export const personGroupValidation = updateGroup({
  firstName: validate(required),
  lastName: validate(required),
});
github MrWolfZ / ngrx-forms / example-app / src / app / sync-validation / sync-validation.reducer.ts View on Github external
interface ValidationErrors {
    passwordMatch?: PasswordValue;
  }
}

function validatePasswordsMatch(value: PasswordValue): ValidationErrors {
  if (value.password === value.confirmPassword) {
    return {};
  }

  return {
    passwordMatch: value,
  };
}

export const validateAndUpdateForm = updateGroup({
  userName: validate(required),
  password: (state, parentState) => {
    if (!parentState.value.createAccount) {
      return disable(state);
    }

    state = enable(state);
    state = validate(state, validatePasswordsMatch);
    return updateGroup(state, {
      password: validate(required, minLength(8)),
    });
  },
  agreeToTermsOfUse: validate(requiredTrue),
});

const reducers = combineReducers({
github MrWolfZ / ngrx-forms / example-app / src / app / recursive-update / recursive-update.reducer.ts View on Github external
};
}

export class BlockUIAction implements Action {
  static readonly TYPE = 'recursiveUpdate/BLOCK_UI';
  readonly type = BlockUIAction.TYPE;
}

export class UnblockUIAction implements Action {
  static readonly TYPE = 'dynamic/UNBLOCK_UI';
  readonly type = UnblockUIAction.TYPE;
}

export const FORM_ID = 'recursiveUpdate';

export const INITIAL_STATE = updateGroup(
  createFormGroupState(FORM_ID, {
    firstName: '',
    lastName: '',
    email: '',
    sex: '',
    favoriteColor: '',
    employed: false,
    notes: '',
  }),
  {
    employed: disable,
    notes: disable,
    sex: disable,
  },
);
github MrWolfZ / ngrx-forms / example-app / src / app / app.reducer.ts View on Github external
import { Action } from '@ngrx/store';
import { groupUpdateReducer, updateGroup, setValue, validate, enable, disable, cast, compose } from 'ngrx-forms';

import { AppState, initialState, ITEM_FORM_ID } from './app.state';
import { Actions, AddTodoItemAction } from './app.actions';
import { ItemFormValue, MetaFormValue, validateText, validatePriority, validateDuedate } from './item-form/item-form.state';

const itemFormReducer = groupUpdateReducer({
  text: validate(validateText),
  meta: updateGroup({
    priority: validate(validatePriority),
    duedate: validate(validateDuedate),
  }),
}, {
    meta: (meta, itemForm) => updateGroup({
      priority: priority => {
        if (itemForm.value.category === 'Private') {
          return setValue(0, disable(priority));
        }

        return priority.isEnabled ? priority : setValue(1, enable(priority));
      },
    })(cast(meta)),
  });

export function appReducer(state = initialState, action: Actions): AppState {