I want to clear not required field but fallsWithinNumericalRange falls with a message Value must be a number
I guess it could be better to handle it with required and fail with the string like ' '.

I tried adding this to a custom renderer:

case 'text': {
      return (
        <FieldText
          {...field}
          className='mainForm'
          shouldFitContainer='true'
          autoComplete='off'
          onChange={(event) => onChange(id, event.target.value)}
          onFocus={(event) => onFieldFocus(event)}
        />
      );
    }

But it doesnt seem to add the form and the elements i want to change are on the div above the input anyway.

.mainForm {
  width: 100%;
  border: 1px solid #999999 !important;
  border-radius: 5px;
  background: #f3f8f2 !important;
}

I'm wondering how you work on the example app since all of the packages are linked through npm rather than the local file system. I'm guessing you don't deploy to npm each time you update a local dependency (i.e. formbuilder).

At first glance, I was thinking I could simply point package.json to the local dependencies but it's not clear how to get all of the devtools dependencies (flow, webpack, etc. ) to listen for file changes in all relevant directories.

I'm hoping for guidance on how you develop this app and instructions for me to set up in an identical manner.

In the online demo app there is a tab called "Field Components" that provides an example of directly rendering field components within the context of a form (i.e. without specifying any defaultFields prop).

It's a simple example that shows 2 fields where the second field controls the visibility of the first. As long as you don't update the value of the first field it behaves correctly, but if you change the value of the first field it no longer behaves in the way that it should (the first field never becomes invisible).

Hey! Started using your library for a side project. One case I wanted was to be able to wrap it in a form element (maybe it would be good to do it out of the box?).

I had to do this atm:

          <FormProcessor renderer={materialUiRenderer}>
            <Form onSubmit={console.log}>
              <FormFragment defaultFields={form} />
              <Button type="submit">submit</Button>
            </Form>
          </FormProcessor>

where <Form> is:

export const Form = (props) => (
  <FormContext.Consumer>
    {(form: any) => (
      <FormRoot
        {...props}
        onSubmit={e => {
          e.preventDefault();
          if (form.isValid) {
            props.onSubmit(form.value);
          }
        }}
      />
    )}
  </FormContext.Consumer>
);

Also with the docs you have atm I kept having to jump around to the src/packages/demo to see the implemented code - I think it'd be great if your examples also had some example usage next to them as well, not just the schema definition :)

Is there a renderer for react native in the works?

Is it possible to display a validation error message dynamically based on outside input? To paint you a picture of my use case: I want to get the value of the form, which happens to be a dropdown, cut a part of it and try to feed it back to the form schema to show in the validation error message. So, say the value is 05 - bananas, I want the validation error to say 05 is an invalid option.

What I tried is writing a function that gets the value as an argument and returns defaultFields dynamically with the error message as a template string, but that doesn't seem to work. Am I going about this in the wrong way, or is this not possible at all?

The typing currently is set to enforce both min and max being provided, but it only needs one.

We need to export flow types so that other projects can consume them

I would care and I would need <Form> to support the autocomplete tag.

At the moment it seems that errors are not being displayed appropriately all the time. This can be seen when using the comparison validation.

This can be seen on the tutorial page of the demo site in the compare validation section. Warnings are only being displayed on focus and do not persist.

For some reason there appears to be some additional margin/padding above and below the options in the Atlaskit select field. This shouldn't be there and isn't there when using the fields out-of-the-box. It must be something in the renderer code adding this.

One possible (unproven) theory is that it is space left as a result of assuming a header will be present

Hello, thank you for the library.

Could you please provide an example on how to add custom field? (e.g. input:file or input:range)

Hi, @draperd I've faced with an issue that options I fetch on componentdidMount do not display in a single select. They become after fetching to component from state but in select is displayed only initial data. I'm curious if its known issue, maybe you have a rough idea about it.

At the moment it is not possible to provide an alternative message when a required field is not present. This needs to be handled in order for the library to support different locales as well as simply providing alternative messages.

One suggestion was to move the required logic into valid when, however requirement is configurable to be based on the value of other fields so this would need some careful consideration and would not be backwards compatible.

It might be better just to provide a custom message in the requirement rules.

I am driving some form field values through the onFieldChange function in a useEffect. This is causing the field state to be touched, but I would like the field state to retain its existing touched state.
Can we do something like this?(This snippet is from the onFieldChange fn in the src/components/Form.js )

//adding another argument skipFieldTouch
onFieldChange(id: string, value: Value, skipFieldTouch) {
    const {
      optionsHandler,
      validationHandler,
      parentContext,
      skipValidationBeforeTouched = false,
      disabled = false
    } = this.props;
    let { fields } = this.state;
    //skiping the field touch update here
    if(!skipValidationBeforeTouched)
    fields = updateFieldTouchedState(id, true, fields);
    fields = updateFieldValue(id, value, fields);
    const nextState = getNextStateFromFields({
      fields,
      lastFieldUpdated: id,
      showValidationBeforeTouched,
      formIsDisabled: disabled,
      resetTouchedState: false,
      optionsHandler,
      validationHandler,
      parentContext
    });

    this.setState(
      (state, props) => {
        return nextState;
      },
      () => {
        const { onChange } = this.props;
        const { value, isValid } = nextState;
        if (onChange) {
          onChange(value, isValid);
        }
      }
    );
  }

Is it possible somehow to add/remove fields dynamically?

I've tried this:

class App extends Component {

  state = {
    schema: fields // some fields list
  }

  addField = () => {
    const newField = {/*...*/}
    
    this.setState({ ...this.state, schema: [...this.state.schema, newField] })
  }

  // ...

  render () {
    return (
      <div className="Form">
          <h1>some form</h1>

          <Form renderer={atlaskitRenderer} >

            <div>
              <FormFragment defaultFields={this.state.schema} ></FormFragment>

              <span onClick={this.addField}>add field</span>
            </div>

            <FormButton label="Save" onClick={this.onClick}/>
          </Form>
        </div>
    )
  }

}

but the FormFragment does not seem to re-render (even when calling forceUpdate() from addField method)

You are referring to relative paths here, and not the npm package.

You also need to export Expander

Hello,

I'm trying to setup the project so i can run it locally.
I want to add a PageHeader component and modify the 'is' function or add a 'contains' function, to make it possible to check if a mult-select contains an option.
E.g., If the multi-select contains the option 'Other' i want a textfield to be shown.

However, i can't seem to get the project running locally.
When navigating to the formbuilder i get the following error:

Uncaught TypeError: t is not a function

Field.js:181 Uncaught TypeError: t is not a function
at t.value (Field.js:181)
at finishClassComponent (react-dom.development.js:13085)
at updateClassComponent (react-dom.development.js:13047)
at beginWork (react-dom.development.js:13715)
at performUnitOfWork (react-dom.development.js:15741)
at workLoop (react-dom.development.js:15780)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
at invokeGuardedCallback (react-dom.development.js:187)
at replayUnitOfWork (react-dom.development.js:15194)

The error seems to originate from nodule_modules/@atlaskit/form/dist/esm/Field.js

Here are the steps which i have taken:

1. Downloaded source
2. Open folder in visual studio code
3. Run 'lerna bootstrap'
4. Navigate to 'packages\core'
5. 'yarn run build'
6. Navigate to 'packages\atlaskit
7. 'yarn run build'
8. Navigate to 'packages\formbuilder'
9. 'yarn run build'
10. Navigate to 'packages\material-ui'
11. 'yarn run build'
12. Navigate to 'packages\examples'
13. 'yarn run start'
14. Open localhost:3001
15. Naviage to 'Formbuilder'

Produces the above exception.

Am i missing something?

Kind regards,

Jaap

What is the preferred way to repopulate the form for editing? How are people doing this? Loop through the responses, match the ids and assign to the (default) value?

Trim value is only supposed to remove the leading and trailing space but it has been reported as removing all whitespace in a field value.

This occurs because all spaces are trimmed as they are typed - trimming should only occur in the output value and not passed back into the field

This has been raised, but I need to capture a full use case so that I can add a test to prevent regressions.

Hi Dave,

Thanks for the library.

I am trying to use this library for a requirement to render form based on a config. I am facing two issues as of now.

1. I have to render the same form in both create mode and edit mode. While opening the form in Edit mode, I have to pre load the form with values from the service. I am not able to achieve this with the field attribute 'defaultValue'. But I could do this by setting the 'value' attribute on Form element with the JSON data. Now, whats the purpose of the attribute 'defaultValue' on the field.

2. I have to disable certain fields on the form when I open it in read only mode. I could not achieve this with the attribute 'disabled' on the field. Could you please let me know if it is the right way.

Below is a code sample of my app.

import React, { Component } from 'react';
import { Form } from 'react-forms-processor';
import { renderer, FormButton } from 'react-forms-processor-atlaskit';

export class UserDetails extends Component<UserDetailsProps, UserDetailsState> {
   const UserDetailsFormConfig = (isEditMode: boolean) => [
    {
      "id": "fname",
      "name": "fname",
      "type": "text",
      "label": "First Name",
      "description": "",
      "placeholder": "Enter First Name",
      "defaultValue": "",
      "visible": true,
      "required": true,
      "disabled": isEditMode || false,
      "requiredWhen": [],
      "shouldMatchRegex": false,
      "hasMinLength": true,
      "validWhen": {
        "lengthIsGreaterThan": {
          "length": "5",
          "message": "First name should have at least 5 characters"
        },
        "lengthIsLessThan": {
          "length": "50",
          "message": "First name cannot have more than 50 characters"
        }
      },
      "hasMaxLength": true,
      "hasNumericalRange": false,
      "shouldCompareTo": false
    }
  ]

  render() {
        let content;
        if (!this.state.isEditMode || 
            (this.state.userData && this.state.userData.fname)) {
            
            content = <PageContainer>
                <UserDetailsFormContainer>
                    <PageHeader />
                    <Form renderer={renderer} defaultFields={UserDetailsFormConfig(this.state.isEditMode)} 
                            onChange={this.onFormValueChange} value={this.state.userData}>
                        <FormButtonWrapper>
                            <FormButton label={this.state.isEditMode ? "Update Details" : "Submit Details"}
                                onClick={this.onSubmitButtonClick} />
                        </FormButtonWrapper>
                    </Form>
                </UserDetailsFormContainer>
                <JsonContainer>
                    <h3>Value</h3>
                    <p>This section shows the current value of the form.</p>
                    <PrettyPrintJson userData={this.state.userData}/>
                </JsonContainer>
            </PageContainer>;
        } else {
            content = <PageContainer>
                <NoResultsContainer>
                    <PageHeader />
                    <div>Oops, user not found!</div>
                </NoResultsContainer>
            </PageContainer>
        }

        return content;
   }

}

Hi @draperd

I had some more time to experiment with your module.

I have a need for some more complicated rules to determine if a field should be visible.

Consider 3 fields, A, B, C.

In my case,
B is dependent on a specific A value.
C is dependent on the same A value and a specific B value.

I have two options which both take some tweaks to your `visibleWhen' logic. The first, is a breaking change, but allows for some more complex expressions.

Here is a sample of the current 'visibleWhen' rules syntax, close to my needs:

fieldC = { ...
       visibleWhen: [
          { id: 'A_matches_123',
            field: 'A',
            is: [123],
          },
          { id: 'B_matches_456',
            field: 'B',
            is: [456],
          },
        ],
}

The rules above, as I understand the code, would render the field in either case, so i would see C even if A.value !== 123. I only want C visible if every condition is true not some.

One option is to wrap this "visibleWhen" array in an object which contains a new flag determining what operator function to use on the array... either some, or every.
Something like:

visibleWhen: {
    method: 'some|every',
    rules: [ rule1, ...ruleN]
  ]
}

...this of course breaks your established interface, so not sure if you would like that idea.

The solution i actually use now is to leverage a logic constraint in the above use-case where I can infer: If B is present then A must have the value C needs. I can then simply test B for the required value and my ruleset size drops to 1 and now the some becomes equivalent to every...

The problem in the existing codebase is that even when I set the omitWhenHidden flag on B, the value of B which makes it to the evaluateAllRules fn still has its value. You must strip the value only when calculating the final form data and not also when the hidden value hit your validation logic.

To solve this problem, I change this:

      if (rule.field && fieldsById.hasOwnProperty(rule.field)) {
        if (fieldsById[rule.field].visible) {
          return evaluateRule(rule, fieldsById[rule.field].value);
        } else {
          return evaluateRule(rule, undefined);
        }
     } else {
        return defaultResult;
      }

I'd like to get your opinion on these changes, or if I missed some key features, set me straight on how to accomplish this with the current code...

If you got this far, thanks for reading the long post!

@draperd I was wondering if we could support more complex expressions for visible, required, valid rules evaluation. I find the current implementation a bit limiting, you can do either like an "OR" and "AND" operations for example for visibleWhen and visibleWhenAll.
I was thinking if we could use a sift expression that would resolve to a predicate ( https://github.com/crcn/sift.js/). I think it would be easy for a developer to pick up mongoDB style queries. Please let me know your thoughts about it.

In order to be able to easily compare dates values we need to convert string values in and out of the field into numbers. We should do this in both the default native renderer and also the Atlaskit renderer.

Make sure to add unit tests for this.

It appears as though there is an issue when fetching options in that the options handler is only used when options are not present. This means that typically the options are only loaded once.

The reason for this is to prevent requesting options repeatedly when fetching options asynchronously. It's not possible to just remove the condition, what we need to do is to only fetch options when appropriate.

This means that for XHR options requests need to be allowed to complete. Just raising this to capture the basics of the issue, more investigation and a solution needs to be provided that doesn't break the existing implementation.

A use case has been raised where it would be good to have validation rules to satisfy conditions like:

Field A is valid when Field B has value X and is not value Z

So the specific use case was when selecting one particular option in a field, certain values in other fields should not be valid (but still displayed). At the moment there is no way of combining validation clauses.

The workaround to this currently is to use a custom validation handler (provided as a prop to the form)

the readme is not that clear to me and i'm having problems finishing the input to a database.

When i get my data into the form, edit and save it:

<Form defaultFields={form.fields} value={formValues} renderer={renderer}>
  <FormButton
    label="Save"
    onClick={(formData) => {
    console.log(formData);
    this.props.updateTicket(formData);
  }}
  />
</Form>

I see the original unaltered data in formData, not the updates i've done. Obviously i'm missing a step.

Hey there!
I have some ideas I'd like to try out and eventually push to the library, although I couldn't start up the project.
Are there any contribution guidelines?
Could you please share your dev environment specs? (Couldn't start the project after cloning it).

Thanks!

I'm trying to figure out how to pre-populate the form with async data. I see how to do it with static data:

<Form defaultFields={form.fields} renderer={renderer} value={{
  a: "value1",
  b: "value2" }}> 
</Form>

How would you recommend assigning values from an API call?

Hi @draperd, I was curious if you had any plans to add support for React Hooks to gain access to the forms context instead of using FieldWrapper and FormContext.

It seems like there is a growing trend in the React community to transition away from class-based components.

A requirement has been raised where it might be good to easily disable all the fields in a form by setting a single attribute on the form itself.

The use case for this is when a form is submitted that issues an asynchronous request (for example to create a new instance of something). Whilst waiting for that request to be processed all the fields in the form should be disabled.

This should be achievable by simply setting a prop on the form - not by updating all the fields individually.

When I submit the form and validation is failing I want all validation errors to be shown.
So it would be great to tell the form to mark every field as touched.

I am using my custom renderer and property disabled is always set as false on field object, even if I set it in the field definition as true.
I noticed that on demo page it also doesn't work with build in renderers.
The simplest steps to reproduce are:

1. Go to https://draperd.github.io/react-forms-processor
2. Select Live editor tab
3. Edit first field definition in the editor box to:

	{
		"id": "NAME",
		"name": "name",
		"label": "Name?",
		"description": "Some additional information",
		"placeholder": "Your name...",
		"defaultValue": "Bob",
		"type": "text",
		"required": true,
		"validWhen": {
			"lengthIsGreaterThan": {
				"length": 3,
				"message": "Name is too short!"
			}
		},
		"disabled": true
	},

4. Check if field is disabled on the right section Preview

Currently, I am using my custom readyOnly property in field definition to use it in custom renderer and then it works as expected.

We should add support for an 'info' attribute that can be used to map date to an information icon that when clicked or hovered over (depending on the renderer) will show additional information.

This is subtlety different from 'description' because it is information that you may not want visible on the form all the time.

I've found that description is passed to helperText of AKField but seems like a new version of form doesn't support it

Possibly I'm missing something, but following the tutorial from:
https://medium.com/@dave.draper20/how-to-create-forms-with-the-react-forms-processor-9bcdd241f502

... and simply replacing yarn with npm I get some errors:

Everything seems to be in place in the node_modules folder... all other modules work fine.

Note that I am also using Neutrino to configure my dev environment with the React preset, not "create-react-app".

I'm running node v10.15.0 and npm v6.7.0

From the command line, when installing "react-forms-processor", I get the following error (same when i install react-forms-processor-material-ui):

>npm install react-forms-processor
>npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.

The above sounds strange to me... i installed both modules.

Any pointers?

When I pass in a checkbox value of true, it does not render the checkbox as being checked. Using the following JSON definition, the field1 and field2 values are shown but the checkbox shows as unchecked when it should be checked.

[{"id":"field1","name":"field1","type":"text","label":"Field 1","description":"","placeholder":"","defaultValue":"","value":"test"},{"id":"field2","name":"field2","type":"text","label":"Field 2","description":"","placeholder":"","defaultValue":"","value":"test2"},{"id":"check1","name":"check1","type":"checkbox","label":"Check 1","description":"","placeholder":"","defaultValue":"","value":true}]

How do I clear the form?
Let's say I want to have a form to add items to a table. Once I click the submit button then the form should be cleared so that I can add next row to the table.

this behaviour occurs after changing some values https://codesandbox.io/s/x3rqrpk09w