How to use the final-form.createForm function in final-form

To help you get started, we’ve selected a few final-form examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github frontier-forms / frontier-forms / lib / core / core.ts View on Github external
export function getFormFromSchema (
  schema: JSONSchema7,
  onSubmit: Config['onSubmit'],
  initialValues = {} // tslint:disable-line typedef
): FormApi {
  const form = createForm({
    validate: validateWithSchema(schema),
    onSubmit,
    initialValues
  });

  registerFields(form, schema);

  return form;
}
github corpusculejs / corpuscule / packages / form / src / form.js View on Github external
klass.__initializers.push(self => {
    Object.assign(self, {
      // Fields
      [$formApi]: createForm(
        formOptionResponsibilityKeys.reduce((acc, key) => {
          if (sharedProperties[key]) {
            acc[key] = self[sharedProperties[key]];
          }

          return acc;
        }, {}),
      ),
      // eslint-disable-next-line sort-keys
      [$$unsubscriptions]: [],

      // Methods
      // eslint-disable-next-line sort-keys
      [$$reset](event) {
        event.preventDefault();
        event.stopPropagation();
github airbnb / lunar / packages / forms / src / components / Form / index.tsx View on Github external
constructor(props: Props<data>) {
    super(props);

    const { initialValues, subscriptions } = props;

    // Setup our form instance
    this.form = createForm<data>({
      destroyOnUnregister: true,
      initialValues,
      mutators: {
        setFieldConfig: this.setFieldConfig,
      },
      onSubmit: this.handleSubmit,
      validate: this.handleValidate,
    });

    this.form.subscribe(this.handleStateUpdate, mapSubscriptions(subscriptions as string[]));

    // Wait until mounted
    this.form.pauseValidation();
  }
</data></data>
github final-form / final-form / examples / react / index.js View on Github external
constructor() {
    super()
    const initialState = {}
    let inConstructor = true
    this.form = createForm({ onSubmit })

    // subscribe to form changes
    this.unsubscribe = this.form.subscribe(
      formState => {
        // cannot call setState in constructor, but need to on subsequent notifications
        if (inConstructor) {
          initialState.formState = formState
        } else {
          this.setState({ formState })
        }
      },
      { active: true, pristine: true, submitting: true, values: true }
    )

    // register fields
    this.unsubscribeFields = ['firstName', 'lastName'].map(fieldName =>
github final-form / react-final-form / src / ReactFinalForm.js View on Github external
const form: FormApi = useConstant(() =&gt; {
    const f = alternateFormApi || createForm(config)
    // pause validation until children register all fields on first render (unpaused in useEffect() below)
    f.pauseValidation()
    return f
  })
github tinacms / tinacms / packages / core / core / src / cms-forms / form.ts View on Github external
constructor({ id, label, fields, actions, ...options }: FormOptions<s>) {
    this.id = id
    this.label = label
    this.fields = fields
    this.finalForm = createForm<s>({
      ...options,
      async onSubmit(values, form, cb) {
        let response = await options.onSubmit(values, form, cb)
        form.initialize(values)
        return response
      },
      mutators: {
        ...arrayMutators,
        ...options.mutators,
      },
    })
    /**
     * We register fields at creation time so we don't have to relay
     * on `react-final-form` components being rendered.
     */
    this.registerFields(this.fields)</s></s>
github final-form / react-final-form-hooks / src / useForm.js View on Github external
  const form = useMemoOnce(() => createForm(config))
  const prevConfig = useRef(config)
github egoist / vue-final-form / src / Form.js View on Github external
data() {
    return {
      finalForm: createForm({
        onSubmit: this.submit,
        initialValues: this.initialValues,
        validate: Array.isArray(this.validate) ? composeFormValidators(this.validate) : this.validate
      }),
      formState: null
    }
  },

final-form

🏁 Framework agnostic, high performance, subscription-based form state management

MIT
Latest version published 8 months ago

Package Health Score

74 / 100
Full package analysis