react-formal: How to set invalid date message, use onsubmit and re-render form

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
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.
How do I force re-render the whole form on schema change? Say if I want to customize the messages.
Is there an example how to use errors object?

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 16 (16 by maintainers)

Most upvoted comments

That’s not how the schema objects work, there isn’t just a property dateOfBirth on the modelSchema. you can either do this:

var modelSchema = yup.object({

    name: yup.object({
      first: defaultStr.required('please enter a first name'),
      last:  defaultStr.required('please enter a surname'),
    }),

    dateOfBirth: yup.date()
      .max(new Date(), "You can't be born in the future!")
      .typeError('testing'),
})

Or if you want to “update” the schema later you need to do something like

var dob = yup.date().max(new Date(), "You can't be born in the future!");

var modelSchema = yup.object({

    name: yup.object({
      first: defaultStr.required('please enter a first name'),
      last:  defaultStr.required('please enter a surname'),
    }),

    dateOfBirth: dob,
  });

// shape works like _.extend or Object.assign()
modelSchema.shape({
  dateOfBirth: dob.typeError('testing')
})

Addendum to number 3, if you update the schema prop on the form, it should rerender the entire form, however it won’t re-validate fields in error, that Is probably a good idea tho, I will add it in the next version…

jquense on May 18, 2015