cerebral-forms issues

Form factory has wrong documentation . hasValue, isPristine, isValid, errorMessage will be ignored and overwriten. Anyway, form factory returns lot of useless fields to be stored in state even if user doesn’t needs it.

{
  value: '', // must be always present, it's ok now
  validationRules: null, // should be omitted if not passed to form factory
  validationMessages: null, // should be omitted if not passed to form factory
  isRequired: false, // should be omitted if not passed to form factory
  requiredMessage: null, // should be omitted if not passed to form factory
  isValueRules: ['isValue'], // should only present if isRequired passed to form factory
  defaultValue: '', // seems ok, but I would rename it to initialValue and made it optional
  hasValue: false, // should never be in state, it is computed
  isPristine: true, //should be in state, and set to false by changeField
  isValid: true, // should never be in state, it is computed
  errorMessage: null, // should never be in state, it is computed
}

so when I call form({field: {value}}) I expect only minimal state in my state-tree:

{
  value: '',
  defaultValue: '',
  isPristine: true
}

Few more notes:

• should have better example for isTouched, maybe even demo implementation
• Set a default value for the whole form contains a typo (newForm)
• Custom global props should go before Set a default value for the whole form where it used
• to make changeField be more composable it should accept params:

changeField(input`field`, input`value`)
// or
changeField(state`path.to.field`, input`value`)

• changeField is different from set, because it operates with value property and sets isDirty
• no need to run any validation on changeField since it can be computed
• validateField ans validateForm action factories is extraneous, see above 😃
• formToJSON should have operator equivalent:

set(input`formValues`, form`pathToForm`)

[christianalfoni]

New forms specification:

// No factory, just write out the supported state structure
{
  state: {
    form: {
      firstName: {
        value: '',
        validationRules: ['minLength:3']
      }
    }
  }
}

// Is a provider

Controller({
  providers: [FormsProvider({
    rules: {
      newRule (value, form, arg) {}
    }
  })]
})

// Use a computed to point to the form
connect({
  form: form(state`path.to.form`)
},
  function MyForm ({form}) {
    form.isValid
    form.firstName.isValid
    
    // Should not define text resources in state, should be in component
    form.firstName.failedRuleIndex

    form.firstName.value

    form.getInvalidFields()
    form.toJSON()
  }
)

// provider in actions
function someAction ({forms}) {
  forms.get('path.to.form')
  forms.addRule('name', () => {}) // Dynamically add rule
  forms.reset('path.to.form') // Reset to defaults
}

That means we can drop a lot of factories cause there is no validation happening inside the state tree anymore.

[Guria]

@christianalfoni please post here revisited blueprint for new forms getting in mind latest API changes