How to use the formik.getIn function in formik

To help you get started, we’ve selected a few formik 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 kalmhq / kalm / frontend / src / forms / Basic / debounce.tsx View on Github external
const mapStateToProps = (state: RootState, ownProps: FilledTextFieldProps & FieldProps) => {
  const {
    field: { name },
    form: { touched, errors, submitCount },
  } = ownProps;
  const isDisplayDebounceError = getIsDisplayDebounceError(state, name);
  const error = getIn(errors, name);
  // https://github.com/formium/formik/issues/691#issuecomment-446509600
  const _touched = getIn(touched, name) || submitCount > 0;

  return {
    showError: !!error && (_touched || isDisplayDebounceError),
  };
};
github chaos-mesh / chaos-mesh / ui / src / components / NewExperiment / Stepper / Target / Stress.tsx View on Github external
useEffect(() => {
    resetOtherChaos(formikCtx, 'StressChaos', false)

    if (getIn(values, 'target.stress_chaos.stressors.cpu') === null) {
      setFieldValue('target.stress_chaos.stressors.cpu', defaultExperimentSchema.target.stress_chaos.stressors.cpu)
    }

    if (getIn(values, 'target.stress_chaos.stressors.memory') === null) {
      setFieldValue(
        'target.stress_chaos.stressors.memory',
        defaultExperimentSchema.target.stress_chaos.stressors.memory
      )
    }

    // Remove another when choosing a single action
    return () => {
      if (actionRef.current === 'CPU') {
        // Because LabelField will set value when before unmount, it's needed to wrap setFieldValue into setTimeout
        setTimeout(() => setFieldValue('target.stress_chaos.stressors.memory', null))
      } else if (actionRef.current === 'Memory') {
github daixianceng / formik-material-fields / src / CheckboxGroupField / CheckboxGroupField.js View on Github external
options,
      multiple,
      label,
      row,
      helperText,
      FormLabelProps,
      FormHelperTextProps,
      FormControlLabelProps,
      CheckboxProps,
      FormGroupProps,
      onChange,
      className,
      classes,
      ...props
    } = this.props;
    const message = getIn(touched, field.name) && getIn(errors, field.name);
    return (
      
        {label && (
          
            {label}
github chaos-mesh / chaos-mesh / ui / src / components / FormField / LabelField.tsx View on Github external
const LabelField: React.FC = ({ isKV = false, errorText, ...props }) => {
  const { values, setFieldValue } = useFormikContext()

  const [text, setText] = useState('')
  const [error, setError] = useState('')
  const name = props.name!
  const labels: string[] = getIn(values, name)
  const setLabels = (labels: string[]) => setFieldValue(name, labels)

  useEffect(() => {
    if (errorText) {
      setError(errorText)
    }
  }, [errorText])

  const onChange = (_: any, __: any, reason: string) => {
    if (reason === 'clear') {
      setLabels([])
    }
  }

  const onInputChange = (e: React.ChangeEvent) => {
    const val = e.target.value
github spinnaker / deck / app / scripts / modules / core / src / projects / configure / FormikApplicationsPicker.tsx View on Github external
render={arrayHelpers => {
          const selectedApplications: string[] = getIn(arrayHelpers.form.values, name) || [];
          const isAppSelected = (app: string) => !selectedApplications.includes(app);
          const apps = applications.filter(isAppSelected);

          return (
            <div>
              {selectedApplications.map((app, index) =&gt; (
                 }
                  actions={ arrayHelpers.remove(index)} /&gt;}
                  touched={true}
                /&gt;
              ))}
</div>
github bcgov / range-web / src / components / rangeUsePlanPage / ministerIssuesRefactor / MinisterIssueBox.js View on Github external
const MinisterIssueBox = ({
  issue,
  ministerIssueIndex,
  activeMinisterIssueIndex,
  onMinisterIssueClicked,
  namespace,
  formik
}) => {
  const allPastures = getIn(formik.values, 'pastures') || []
  const pasturesOptions = allPastures.map((pasture, index) => ({
    value: pasture.id,
    text: pasture.name || `Unnamed pasture ${index + 1}`,
    key: pasture.id
  }))

  const types = useReferences()[REFERENCE_KEY.MINISTER_ISSUE_TYPE] || []
  const typeOptions = types.map(type => ({
    key: type.id,
    value: type.id,
    text: type.name,
    id: type.id
  }))

  const {
    detail,
github walmartlabs / concord / console2 / src / components / atoms / FormikCheckbox / index.tsx View on Github external
{({ field, form }: FieldProps) =&gt; {
                    const touched = getIn(form.touched, fieldName);
                    const error = getIn(form.errors, fieldName);
                    const invalid = !!(touched &amp;&amp; error);

                    const handleChanges = (ev: {}, { checked }: CheckboxProps) =&gt;
                        form.setFieldValue(fieldName, checked);

                    return (
                        
                            <label>{label}</label>
                            
                            {invalid &amp;&amp; error &amp;&amp; (
                                <label color="red">
                                    {error}
                                </label>
                            )}
github spinnaker / deck / app / scripts / modules / core / src / projects / configure / Pipelines.tsx View on Github external
render={pipelinesArrayHelper =&gt; {
          const project: IProject = pipelinesArrayHelper.form.values;
          const configs: IProjectPipeline[] = getIn(project, Pipelines.pipelineConfigsPath);
          const apps: string[] = getIn(project, 'config.applications');

          return (
            <div>
              <div style="{{">
                {tableHeader}
                    {configs.map((config, idx) =&gt; {
                      const pipelinePath = `${Pipelines.pipelineConfigsPath}[${idx}]`;
                      const application = config &amp;&amp; config.application;
                      const appPipelines = application &amp;&amp; appsPipelines[application];
                      const pipelineOptions = appPipelines &amp;&amp; appPipelines.map(p =&gt; ({ label: p.name, value: p.id }));

                      const key = `${application}-${config &amp;&amp; config.pipelineConfigId}-${idx}`;

                      return (<table style="{{">
                  <thead></thead>
                  <tbody></tbody></table></div></div>
github treebohotels / leaf-ui / src / Select / Select.web.js View on Github external
size,
      hint,
      required,
    } = this.props;

    let {
      options,
      error,
    } = this.props;

    const {
      formik,
    } = this.context;

    if (formik &amp;&amp; name) {
      error = getIn(formik.touched, name) &amp;&amp; getIn(formik.errors, name);
      error = error &amp;&amp; error.replace(name, label || name);
    }

    options = this.makeOptions();

    return (
      
        {({
          isOpen,
          getToggleButtonProps,
          getItemProps,