I'm trying to create an upload field of some kind with your library, is this doable?

Hi !

I'm trying to run a function after all the input fields are correctly set, but the onSubmit isn't being called. The render and function are as below:

registerAccount: function () {
    console.log(arguments);
},

...

<Form schema={userSchema} className="wrapper" method="post" action="/users/register" onSubmit={this.registerAccount}>
    <div className="row">
        <div className="column-12">
            <Field name="username" placeholder="Username" />
            <Message for="username" component={ErrorMessage} className="icon-notification" />
        </div>
    </div>
    <div className="row">
        <div className="column-12">
            <Field name="email" placeholder="Email" />
            <Message for="email" component={ErrorMessage} className="icon-notification"/>
        </div>
    </div>
    <div className="row">
        <div className="column-12">
            <Field type="password" name="password" placeholder="Password" />
            <Message for="password" component={ErrorMessage} className="icon-notification" />
        </div>
    </div>
    <div className="row">
        <div className="column-12">
            <Button className="btn">Register Account</Button>
        </div>
    </div>
</Form>

Is there something missing?

Thanks

Looks like the autofill feature in Safari isn't actually picked up in the field value. For instance, if I write "te" and safari autofills it to "test", on submission only "te" will be set.

Thanks!

On doc example:
http://jquense.github.io/react-formal/docs/#/api/field

<Form noValidate schema={modelSchema}>
  Use the schema to determine type
  <Form.Field 
    name='dateOfBirth' 
    placeholder='date'/>

  Override it!
  <Form.Field name='dateOfBirth' 
      type='time' 
      placeholder='time only'/>

  Use a custom Component 
  (need native 'datetime' support to see it)
  <Form.Field 
    name='dateOfBirth' 
    type={MyDateInput}/>

</Form>

Given that code, it seems its throwing an error
Uncaught TypeError: Cannot read property 'dateOfBirth' of undefined

Today faced with problem like a validation of repeat password field.
I understand that it is not a problem of yup.
Can you suggest how i can solve it?

Example:

const schema = yup.object({
  email: yup.string().email('not a valid').required('required'),
  password: yup.string().required('required'),
  password2: yup.string().required('required')
})

class RegisterForm extends Component {
  render () {
    return (
      <Form
        schema={schema}
        value={this.state.model}
        onChange={model => this.setState({ model })}
        onSubmit={() => this.props.handleForm(this.state.model)}
      >
        <fieldset>
          <div>
            <label>Email *</label>
            <Form.Field name='email' className='text' />
            <Form.Message for='email' />
          </div>
          <div>
            <label>Password *</label>
            <Form.Field type='password' name='password' />
            <Form.Message for='password' />
          </div>
          <div>
            <label>Repeat Password *</label>
            <Form.Field type='password' name='password2' />
            <Form.Message for='password2' />
          </div>
          <Form.Button type='submit'>Register</Form.Button>
        </fieldset>
      </Form>
    )
  }
}

I'm working on an application and react-formal is being very helpful. However, I'm curious on how to use an array schema.

The array part of the schema looks like this:

  breakpoints: yup.array().of(yup.object({
    time: timeStr,
    action: yup.string()
  }))

It's an array of object with actions and the time to do them at. I'm having trouble figuring out how to access the fields or write them in React. I've tried using breakpoints[0], breakpoints[0].time, etc and I get errors like "Can't find [0] of undefined" or "Cannot convert undefined or null to object".

I know this isn't a real issue but I wasn't sure where else to ask. It'd be great to have an example on how to use arrays either on the site (or in this issue so others can search)!

Thanks for the good work!

Hello,
How to reset form using reset button?

I believe the issue is that this code:

https://github.com/jquense/react-formal/blob/master/src/Form.jsx#L397

is expecting the the validate method to throw an error, but I believe the method actually returns errors.

Eg. on submit, when I need to check for unique email and the server returns an error.

how can I add an error to a field and have it show up on the form?

The docs don't seem to have examples for radio inputs and looking at the code it doesn't seem to look for type="radio". Is there a way to implement radio selects?

I have a modal form so I can't use autoFocus. I tried putting ref in <Form.Field ref="focushere" name="name" /> and invoked this.refs.focushere.focus() after opening the modal but it throws this error:

Uncaught TypeError: _this.refs.focushere.focus is not a function

Please help. Thanks.

If I have a input field that has a defaultValue, is it possible to attach a class to it if the value differs from the defaultValue? A use case for this would be to highlight fields that are changed in orange so that user knows which fields they updated.

Me again! Sorry, trying to port from our old form framework to yours. 👍

Looking at some hacks to do this but it is looking pretty ugly, and I think this one is a fix.

Your current Form submit():

    schema
      .validate(value, options)
      .then(() => this.notify('onSubmit', value))
      .catch(err => {
        var errors = errToJSON(err)

        if (debug && process.env.NODE_ENV !== 'production') {
          warning(!Object.keys(errors).length, '[react-formal] (onSubmit) invalid fields: ' +
            Object.keys(errors).join(', '))
        }

        this.notify('onError', errors)
      })

suggested:

    schema
      .validate(value, options)
      .then((validatedValue) => this.notify('onSubmit', validatedValue))
      .catch(err => {
        var errors = errToJSON(err)

        if (debug && process.env.NODE_ENV !== 'production') {
          warning(!Object.keys(errors).length, '[react-formal] (onSubmit) invalid fields: ' +
            Object.keys(errors).join(', '))
        }

        this.notify('onError', errors)
        this.notify('onInvalidSubmit', errors)
      })

Returning the validatedValue should be the correct thing here, right? onSubmit should have our cleaned and validated, currently it does not and so we have to run the data through the validator again to get the proper data. If someone does not notice and do that then they might get bad data that they expect to be valid (e.g. if you use string().trim().max(100) right now it will call onSubmit saying the data is valid but it might be a string with 10 alpha characters and 5000 spaces).

I don't believe onSubmit should ever receive the raw data unless noValidate is set, which is fine then. This should be a fix as either I get unexpected data or I have an unnecessary performance hit.

Our previous framework had a way to detect an invalid submit, so when you submit the form it will run the validation as you do currently but if it fails it will call our onInvalidSubmit handler. We popup a toast telling them there is an error and scroll to the first error. We have some longer forms that we need to keep this feature for, and a notification would assist. Otherwise I need to somehow know that you are submitting, and am currently hacking into your Form to wrap the submit() with a state update, and it is not turning out so hot.

Thanks again.

Hi,

Is there a default theme included? Right now I get this:
http://take.ms/FcY9E

and it seems that date of birth requires react-widgets? Classnames say 'rw-popup rw-widget'.

I'm using webpack and using commonjs syntax.

Apologies if this is already covered somewhere, but what is the best way with react-formal to do validations that depend on the values of multiple fields? Should I just hook into the form's onChange handler and set this.setState with the errors?

Hi,

First, thanks for the great set of libraries.

Second, I am currently having an issue with clearing a form after a programmatic submit (i.e calling the submit() function). I have a form that is controlled and after submit, i set the value prop of the Form component to customerSchema .default(). At first this did nothing to clear the form values, but I finally realized that I needed to set default values of the fields in the schema. This now worked to clear the form but with some quirks and issues with validation that I will describe below. I have also attached a sample with the full code.

TL;DR
How to properly clear a form, while still enabling validation to function as expected?

I have the following schema:

const customerSchema = yup
  .object().shape({
    name: yup.string().default('')
      .required('please enter a name'),

    dateOfBirth: yup.date()
      .max(new Date(), "Are you a time traveler?!"),

    // Required field validation occurs when field is nullable
    // But setting model to default DOES NOT clear the field
    // colorId: yup.number().nullable()
    //   .required('Please select a color')

    // Required field validation DOES NOT occur when field is set to default number
    // But setting model to default DOES clear the field
    colorId: yup.number().default(-1)
      .required('Please select a color')
  });

1. When I define my colorId schema like so

colorId: yup.number().default(-1)
      .required('Please select a color')

and my select field default option like so (i.e. setting the default value to be the same as schema default):
<option value={-1}>Select a color...</option>
This clears the field as expected when I set the model to default

this.setState({
    model: customerSchema.default(),
    errors: {}
});

but required field validation does not occur .ie. I didn't see the error I expected

1. When I define my colorId schema like so. (Based on the example in the docs)

colorId: yup.number().nullable()
    .required('Please select a color')

and my select field default option like so:
<option value={null}>Select a color...</option>
The field does not clear the field as expected, when I set the model to default. But required validation does trigger in this case. (Note I also get a warning from React in the console, about setting value to null instead of '' or undefined)

1. After successfully submitting and clearing the form using code in No. 1, I get an issue where the last field I touched before hitting submit gets validated again and displays the validation error. I guess maybe the validation is triggered again since the field is blurred? But how to avoid this?
2. This is probably unrelated to the above issues. But using the sample code from the docs, when I add a date field like so <Form.Field id="dateOfBirth" name='dateOfBirth'/>, I get the following error in the console: Date.js:72 Uncaught TypeError: Cannot read property 'value' of undefined. If i set the type to 'text' error goes away.

Please see sample below:
react-formal-test.zip

Since for is an html attribute I suggest using a different word since this is supposed to be a prop tying to the error message, maybe ref?

Just looking for some guidance on how that would work? For example, I have a list of 5 radio input options and it is required that 1 option should be selected. The list is dynamically generated so I don't know the name field values beforehand to add it to the schema.

I would like to dynamically add form elements. I have tried combinations of validation:
let someModelSchema = yup.object({ group: yup.array().of(yup.object({itemA: yup().number(), itemB: yup().number()})) });

However I assumed that the correct naming convention would be (name attr) 'group.itemA' for the relevant number input or 'group[0].itemA' neither of which seem to work. Any advice on how to dynamically add form elements and validate these elements? Thanks!

I have a bunch of values on an object which are fairly deep, my structure looks like this:

{
  "roles": {
    "57randomid": {
      create: true,
      update: false,
      delete: false,
      read: true,
    }
  }  
}

When I map over my fields to generate check boxes for each of these values:

  <ul>
    {
      Object.keys(modelSchema.fields.roles.fields).map((i) => {
        return (
          <li key={ i }>
            {
              Object.keys(modelSchema.fields.roles.fields[i].fields).map((b, idx) => {
                return (
                  <div key={ idx }>
                    <Label>
                      <Form.Field
                        type="checkbox"
                        name={ `roles.${ i }.${ b }` } />
                      <span>{ b }</span>
                    </Label>
                  </div>
                );
              })
            }
          </li>
        );
      })
    }
  </ul>

I am getting the following error:

Uncaught SyntaxError: Unexpected token ILLEGAL

Which points to this line here:

It appears the getter function is failing when it is passed something like roles.57randomid.create. Is it not possible to have deeply nested form fields as I have created?

I get the following warning when I use react-formal:

warning.js:44 Warning: Input is changing a uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

I'm not totally sure, but it seems to me it appeared after upgrading the project to react v15.
Is there a way to get rid of it?

This issue can be replicated by including a flag in the state that is set onSubmit.

When the flag is high, remove the Form from the DOM and the Form will for some reason run a native submit.

I am facing an issue with onSubmit handler in forms. The culprit seems to be the line
https://github.com/jquense/react-formal/blob/master/src/Form.jsx#L372 where props is not defined.

Should that be this.props ?

I would have opened a pull request but I wasn't able to find out anything about the abortEarly property. Also assigning to props inside a component is an antipattern.

1. How do I set the invalid date message for type=date . Right now if I choose a date, and remove it, I get: this (value: ) must be a date type

2. If I only want to update my models onSubmit?
   <Form schema={modelSchema} defaultValue={modelSchema.default() } onSubmit={ model => this.setState({ model })} >

   If I do this:
   componentDidUpdate(prevProps, prevState) { console.log(this.state.model) }
   I only get a SyntheticEvent Object; This works correctly if I use onChange however.

3. How do I force re-render the whole form on schema change? Say if I want to customize the messages.

4. Is there an example how to use errors object?

There are some concerns:

1. I don't want to disturb user with alert messages until he's really done typing for the first time.
2. I want to give him feedback as soon as possible if he's trying to fix the problem.

I think that it should be distinguished whether value is fresh or dirty.

If it's fresh — one set of events (['onBlur'] by default),
if it's dirty — another one (['onChange', 'onBlur'] as it's now).

May be I'm missing something and it's already possible to achieve that in some other way?

I've having some trouble handling events. There doesn't seem to be a way to access the event object inside of the Form component callback methods. I'd like to access the respective event object for each callback method (onChange, onSuccess, onError). When using onChange, I would expect to see the blur or change event object scoped as the second argument to the callback method, i.e. onChange(model, event). Same story with onSubmit, I'd expect to see the form's submit event object, like onSubmit(model, event).

In vanilla React I'm usually able to access this data in my event handlers, so in theory I should still be able to make use of these objects without having to completely re-design the app's components.

Is there a specific reason you've left this out? Or is it just something that hasn't been implemented yet?

I'm not sure if these event objects are missing in Field components - I haven't looked at the Field component yet but I suspect the events are missing there too.

_getFieldsToQueue is called initially, but this._queue is undefined and throws an error when trying to loop over what is supposed to be an Array. I can repro by creating the exact form from http://jquense.github.io/react-formal/docs/#/api/form

I have the following HTML structure for my form:

<label className="bb">Subject*<Form.Message for="subject"/>
    <Form.Field name="subject"/>
</label>

Is there a way to apply invalid-field className to label instead of Form.Field itself?

Hello,

Love the look of your form management component but having some problems getting it working with an onChange event.

Here's my class:

import yup from 'yup';
import React from 'react';
import Form from 'react-formal';

class EmailForm extends React.Component {

    getSchema() {
        return yup.object({
            email: yup.string().email().default(this.props.email)
        });
    }

    getDefaultValues() {
        return this.getSchema().default();
    }

    render() {
        return (
            <Form
                schema={this.getSchema()}
                value={this.getDefaultValues()}
                onChange={model => this.setState({model})}>

                <Form.Field name="email" placeholder="Please enter an email address..." />
                <Form.Message for="email" />

                <Form.Button type="submit">Submit</Form.Button>
            </Form>
        );
    }
}

export default EmailForm;

Validation appears to work (the message shows and hides correctly and classes are correctly applied based on validity). However, I'm seeing the following in the console after every onChange event is fired: What am I doing wrong?

Uncaught TypeError: path.match is not a function
    module.exports.forEach  @   index.js:42
    module.exports  @   reach.js:12
    (anonymous function)    @   Form.js:279
    Validator._validateField    @   Validator.js:49
    tryCallTwo  @   core.js:45
    doResolve   @   core.js:171
    Promise @   core.js:65
    _validateField  @   Validator.js:48
    (anonymous function)    @   Validator.js:37
    validate    @   Validator.js:36
    (anonymous function)    @   Form.js:416

Similar to #57 but for an uncontrolled form. Currently setting the schema on the Form and nothing else (no value, onChange, or defaultValue) and receiving the warning. If I set default values for all the inputs using defaultValue I don't get a warning, but if I set default values through yup (yup.string().default('')) I still receive the warning.

Just a quick collection of things I think are needed or might be needed to call this "Done"

Some of them may need coordination with topeka, RIM, and yup.

• react native support (#44)
• API name cleanup
  • the lack of symmetry between mapValue and valueAccessor is frustrating and a bit confusing, current thinking is: mapToValue and mapFromValue, where mapValue is initially aliased to mapFromValue and eventually removed
  • The escape hatches for validating more fields from a single Field is inconsistent. name specifies both the value binding and the validation path, most of the time they are the same but when different the alsoValidates hook feels ugly. The problem is always how to coordinate with name and valueAcccessor perhaps name could be optional provided enough other props are specified? Or maybe name becomes a shortcut. It may just be better to have a lower level component below Field
• Some notion or sense of "not touched" on fields, this is tricky b/c it requires either storing validation state with inputs, or allowing it to be controlled in a ugly way?
• Related to above, but also maybe a notion of success, vs failure. Where success is an input that has been touched and is actively valid.

I'd love to have the ability to pass Immutable.js structures to React Formal. Is this feasible?

I don't mind seeing if I could add this myself, but I'm not quite sure where to start?

Is it possible to manually update form values outside of a Form.Field context?

I have a Codemirror component that can trigger a function onChange, but I am unsure how to tie it into React formal. Is this currently possible? Or is there a better approach to take?

Just creating a placeholder ticket if you intended to support react-native.

I tried playing with it little bit and heres what i did to get a basic form working:

• override the inputs using Form.addInputTypes to render native inputs.
• Standard Promises does not work with react-native. Had to remove var Promise = require('promise/lib/es6-extensions'); in bunch of places. react-native provides a global Promise.
• There is no form component on react-native so use component={View}

@jquense Great api btw. Thanks 👍

Is there no way to make the form submit without the Form.Button?

Trying to migrate to react-formal and going rather smoothly except for one part.

We have React TransitionGroups for our error and help messages on the inputs. I used to have a way to determine a boolean hasError in my form group component which composed the label, input, and message spans. I can't seem to figure out how I can determine a hasError state inside the render of my form component? I have the Form.Message in there but it always has the root span component even if there are no errors, so it does not trigger any transitions.

I would like to conditionally include the Form.Message component only when it has messages, how can I achieve that? I would like to avoid having to pass the form's onError result back down to each input form group and determine their current state, would be a lot of ugly binding and there should be another way.

Maybe will have to write my own component instead of using Form.Message, and expose it myself?

Thanks.

How do you use the setter function in Form?
My use case is the initial value is coming from an async operation. So Form is long rendered before I get my data so I want to pass the updated value to the form.

Given this schema

const schema = yup.object({
  password: yup.object({
    first: yup.string().required('Pass1'),
    second: yup.string().required('Pass2')
  }).test('samePasswords', 'Pass1 does not equal Pass2', async function (value) {
    await Promise.delay(50);
    return value.first && value.first === value.second;
  })
});

and this form

<Form schema={schema} onError={(errors) => console.log(errors)}>
  <Form.Field name='password.first' type='text' />
  <Form.Field name='password.second' type='text' />
</Form

console logs errors for password.first and password.second but not for password in case strings are not equal. Just empty object.

Also if I do add onChange={this.onFormChange} to the <Form> and, given this implementaion of onFormChange

onFormChange = async (v) => {
  try {
    const value = await schema.validate(v, {abortEarly: true});
  } catch (err) {
    console.log(err);
  }
}

console logs all the required errors, including two strings not being equal.

Thanks for your efforts — really sane approach to forms.

Trying to use my custom component DropdownSelect as a Form.Field (It's just a wrapper for your react-widget DropdownList component). When I add it to the markdown like this:

<Form.Field type={DropdownSelect} />

I get this error:

Uncaught TypeError: Cannot read property '_currentElement' of null

Am I using the type prop wrong?

First of all, I really like this package. However I'd like to add some radiobuttons within my app. Is there an easy way? (I see them in the react-widgets lib). Would like to hear from you!

When using the form in a controlled manner the field value prop(s) are not updated when the form value is updated from a store.. It looks like it is implemented to work on componentWillMount but not on componentWillReceiveProps..

For handling i18n (with React Intl), I think I want to make the messages in my schema definition just be tokens, then in <Form.Message> resolve them to the localized strings. Something like:

<Form.Message>
  {key => <FormattedMessage {...messages[key]} />}
</Form.Message>

It seems like accepting functions as children here would be a generic way to accomplish this.

npm install fails with EPEERINVALID error now:

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements! 

Looks like the problem is that react-formal depends on react-router 0.13.x which has react 0.13.x as a peer dependency.

After removing component-playground (which has react 0.14.x as a peer dep) from dependencies, I got a more detailed error message:

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@>=0.13.0 || ^0.14.0-beta1
npm ERR! peerinvalid Peer [email protected] wants react@>=0.11.0
npm ERR! peerinvalid Peer [email protected] wants react@>=0.11.0
npm ERR! peerinvalid Peer [email protected] wants react@>=0.13.0
npm ERR! peerinvalid Peer [email protected] wants [email protected]

Changing react-router version to ^1.0.0-rc1 seems to fix the issue.

I have a button outside the <Form>. Is it possible to submit the form from there? Thanks for this by the way...

Here's a video of it in action. Will try to add some code to the issue, but it's a pretty minimal form.

https://www.dropbox.com/s/y3omi5wakez2d70/react-formal-email-validation.mov?dl=0

I am having some problems trying to integrate react-formal with react-bootstrap. What I am doing, is to call Form.addInputTypes with a wrapper input that looks more or less like this:

render() {
    return (
      <Input
        {...this.props}
        hasFeedback={validationState != null}
        bsStyle={validationState}
        className={styles.input}
        tagName={BsInput}
      />
    );
  }

where Input comes from react-formal/lib/inputs/Input and BsInput is the react-bootstrap Input component. This works as expected, the problem is with checkboxes and the other kinds of input that don't expose a tagName prop, so I can't use the same approach. Is there an easier approach I am missing or do you think it makes sense to add the tagName prop also to the other input types? If that's the case, I can work on a PR.
Thanks for the great work!

@jquense There is a contolled input warning for a controlled form where the input value is undefined. The form is remains contolled however the input value is intialised from the state as undefined. This does not mean the input is uncontrolled. Could this be an issue with the library I know React checks for this..

Reference: #53

This can be reproduced on http://jquense.github.io/react-formal/docs/#/api?_k=y0l2ks. Try typing in "Test" into name, then putting the cursor at "e" and typing anything. The cursor types in the e but then jumps to the end of the text input.

Hey there,

I find yup transformations to be extremely useful, but the onChange handler on Form gets called right away, shouldn't it wait for the schema to be validated?

I created this test to better explain what I'm saying:

describe.only('onChange should wait for transformations', () => {

  yup.addMethod(yup.string, 'somemethod', () => 'fixedvalue');


  var change = v => {
   // v equals { name: { last: '', first: 'Jill' } } but is it correct?

    v.should.eql({
      name: {
        first: 'fixedvalue', last: ''
      }
    })
  }

  var schema = yup.object({
    name: yup.object({
      first: yup.string().somemethod(),
      last:  yup.string().default('')
    })
  })


  var inst = $(
      <Form schema={schema} defaultValue={schema.default()} onChange={change}>
        <Form.Field name='name.first' className='field'/>
        <Form.Field name='name.last' className='field'/>
      </Form>
    ).render()

  inst.first('.field').trigger('change', { target: { value: 'Jill' } })
});

Is this intended behaviour? Thanks for the help!