Initial Data not included in cleanedData until focus/change

[vinceprofeta]

Given the following form where firstname is passed in by initial data. this.isComplete() never returns true because firstname is undefined in form.cleanedData even though the value appears in the field.

new HelpForm({onChange: this.forceUpdate.bind(this), controlled: true, initial: {firstname: "Name"}})

const HelpForm = forms.Form.extend({
  firstname: forms.CharField({required: true}),
  subject: forms.CharField({required: false}),
  message: forms.CharField({widget: forms.Textarea, required: true}),
  requiredCssClass: 'required',
  optionalCssClass: 'optional',
  errorCssClass: 'error',
  validCssClass: 'valid',
  render(props, cancelAction) {
    const fields = this.boundFieldsObj();
    const isValid = this.isComplete();
    return (
      <div className="form-container">
        <div className={fields.firstname.cssClasses() + ' field-group'}>
          {fields.firstname.render()}
        </div>
        <div className={fields.subject.cssClasses() + ' field-group'}>
          {fields.subject.render()}
        </div>
        <div className={fields.message.cssClasses() + ' field-group'}>
          {fields.message.render()}
        </div>

      </div>
    );
  } 
});

[vinceprofeta]

@insin Any insight would be great. I am getting around it by updating the form in my class constructor but would rather you initial

[ryanjuve-porch]

I am also experiencing this issue. @vinceprofeta what does your workaround look like?

[marr]

You can use this.data to access the unchanged, initial data.

[vinceprofeta]

@ryanjuve-porch @marr I created my own iscomplete function that takes in a form and returns whether it is complete or not.

import _ from 'lodash';
export default function formIsComplete(form) {
  let value = true
  _(form.fields).forEach(function(input, key) {
    if ((!form.data[key] && input.required) || (form._errors && _.keys(form._errors.errors).length)) {
      value = false;
    }
  }).value();
  return value;
}

use with a button

<button disabled= {!formIsComplete(this)}>Sign in</button>