I have a custom UI Input for date range picker, start & stop.

Until I can access both fields' values from a Field level component, I can't do a "number of days picked" calculation until the document saved in the database (or to component props).

Ideally, I want to, from a Field level component, have access to the parent form and all of it's API.
Then I could call the new (and awesome) getModel() and look up the current, in-form value for any field.

Note: I can not simply use the new formRef access, because I am trying to use this inside a Field connected component. I want access to this field's value (easy) and other fields' values (not so easy right now - that I can find)

I'm not sure if this is intended or not but I get a bunch of "Unknown props" errors.
Per example:

Warning: Unknown props `model`, `schema`, `validate` on <form> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in form
    in AutoValidatedQuickSemanticForm (created by CreateDivisionPage)
    in div (created by CreateDivisionPage)
    in div (created by Modal)
    in div (created by Modal)
    in div (created by Modal)
    in Modal (created by CreateDivisionPage)
    in CreateDivisionPage (created by RouterContext)
    in div (created by AppLayout)

What is your recommendation for multi-checkbox inputs?
Ideally I want to return an array of values, for all checked checkboxes, and specify them as uniforms.options

We need to be able to control the checkbox field better.

• We should default to no label on the left (in the FormGroup)
• We should allow a schema defined custom label on the left (?prop: labelLeft ?)
• We should add a   after the input and before the label on the right.

Currently, uniforms begins validation only with the initial submit.

But, HTML5 form validation (for fields like number, email, date etc) supersedes the form submit handling in such a way that it is called before the first submit gets fired.

This results in native browser validation messages appearing.

After the first submit, uniforms takes over the validation, no longer displaying native browser messages.

To mitigate this issue, we could perhaps simply suppress HTML5 form validation all together.

Editing line 150 of BaseForm.js from

<form {...this.getNativeFormProps()} />

to

<form {...this.getNativeFormProps()} novalidate />

should suffice.

For example, here's a standard Enum based "select" field with allowedValues & autoform.options

{ ...
  fileType: {
    type: Number,
    label: 'File Type (Upload, processing, tmp, log, etc)',
    optional: true,
    allowedValues: Enums.Buckets.fileTypes.values(),
    autoform: {
      options: Enums.Buckets.fileTypes.options(),
    },
  },
... }

I have this functionality somewhere -- I'll see if I can dig it up...

Currently you can't define the label for the submit-button in a AutoForm or QuickForm unless you implement your own QuickForm.

E.g. like this:

import {QuickForm} from 'uniforms';

import BaseForm    from './BaseForm';
import AutoField   from '../fields/AutoField';
import ErrorsField from '../fields/ErrorsField';
import SubmitField from '../fields/SubmitField';

const Quick = parent => class extends QuickForm.Quick(parent) {
    static Quick = Quick;

    getAutoField () {
        return AutoField;
    }

    getErrorsField () {
        return ErrorsField;
    }

    getSubmitField () {
        return () => <SubmitField value={this.props.submitLabel} />;
    }
};

export default Quick(BaseForm);

Now I can use <AutoForm submitLabel="Send" schema={...} />

In my code i have a slightly different SubmitField-component with a button instead of a , because supports children. So in my code i have:

getSubmitField () {
        return () => <SubmitField>{this.props.submitLabel}</SubmitField>;
    }

where submitLabel could also be a react-component.

Maybe we can add a similar property like submitLabel to the unstyled/bootstrap/semantic-implementations. (not sure if submitLabel is the right word, though).

Another solution would be to have a component that renders all fields but the submit button (similar to aldeed:autoform's afquickfiels: https://github.com/aldeed/meteor-autoform#afquickfields)

That would enable to have half-automatic forms

I am using Flow Router SSR, when using an <AutoForm> component I get this error on browser console:

Warning: React attempted to reuse markup in a container but the checksum was invalid. 
This generally means that you are using server rendering and the markup generated 
on the server was not what the client was expecting. React injected new markup to 
compensate which works but you have lost many of the benefits of server rendering. 

Instead, figure out why the markup being generated is different on the client or server:
 (client) tid="4"><label for="bbp70g2bm510khqp" cl
 (server) tid="4"><label for="ne1wrgd9mjrcz0k9" cl

Any ideas on how to tackle this?

I have following form:

<AutoForm schema={schema} onSubmit={doc => console.log(doc)}>
  <AutoField name="title" />
  <div className="two fields">
    <AutoField name="field1" />
    <AutoField name="field2" />
  </div>
  <ListField name="courses">
    <ListItemField name="$">
      <NestField>
        <AutoField name="title" />
        <AutoField name="description" />
        <div className="three fields">
          <AutoField name="min" />
          <AutoField name="max" />
          <AutoField name="max2" />
        </div>
      </NestField>
    </ListItemField>
  </ListField>
  <ErrorsField />
</AutoForm>

This code leads to an infinite loop and the browser freezes. If I replace

<div className="three fields">
  <AutoField name="min" />
  <AutoField name="max" />
  <AutoField name="max2" />
</div>

with

<AutoField name="min" />
<AutoField name="max" />
<AutoField name="max2" />

the browser doesn't freeze.

If I am submitting a form via a method call (for example) and it's async --- I would like the ability to pass down a callback and act on it's response.

The new API for formRef.submit() is great, but I can not see any way to act on results from that submit.

Here's my current use case:

1. Normal submit the form, saves a document and shows a success notification, doesn't navigate
2. Clicking on a Save & Continue button, should submit the form, and on success, navigate to the next page.

The problem is, I can trigger formRef.submit() but I have no way to wait on the response of it, from the React component level, without involving internal state.

Here is what I'm doing now to handle this:

  constructor(props) {
    super(props);
    this.state = { afterSaveContinue: false };
    this.onSubmit = this.doSubmit.bind(this);
  }
  doSubmit(data) {
    const { afterSaveContinue } = this.state;
    const { myDocument, handleSubmit } = this.props;
    if (!afterSaveContinue) {
      return handleSubmit(data);
    }
    return handleSubmit(data, (err, res) => {
      if (err) return;
      browserHistory.push(`/myDocument/${myDocument._id}/nexpage`);
    });
  }
  setAsClicked() {
    this.setState({ afterSaveContinue: true });
  }

But, I could imagine enabling some alternate submit-like handler, when clicking on the "continue" button, which passed either extra arguments into our onSubmit function, or received standard events or callbacks from it.

Simple schema runs validations synchronously, but some validations require server roundtrips or other async calls.

For example, I may want to check a given input if it conforms to some security related constraints or uniqueness constraints etc. And the only way to do that may be to use a server side method. And if it does not, I would like to show an error message to the user.

For such cases, simple schema allows manually adding validation errors

Currently, uniforms only provides the doc to onSubmit callback so there is no way to access the current validation context of the simple schema.

So, it would be great if onSubmit callback had access to the simple schema validation context. In fact, there may be other valuable information that can be provided. So, it would even be better if we had a way to access the whole autoform context in there, not just the document.

<ErrorField name="someField" errorMessage="some message" /> is showing message as plan text, without any error markup

I used uniforms with old version of react because of other project dependencies. Most of feature works well despite the uniforms need react@15. However I got error when tried to use ErrorsField.

No render method found on the returned component instance: you may have forgotten to define render, returned null/false from a stateless component, or tried to render an element whose type is a function that isn't a React component.

Is it possible to provide functionality of uniforms with older version of react.

What would be the canonical way to automatically submit the form on any change on any field?

Basically, I want to achieve a "buttonless" form where all user changes automatically get validated and persisted.

When using autosave={true} on AutoForm, the form is instantly validated when component mounts.

Similar to #56 it would be convenient to be able to lookup the value for any field.

Basically, it's something like: _.pick(formRef.getModel(), 'myfield')

That would work, but I suspect you could come up with something more elegant.

Form events such as onSubmit currently only passes doc but there are cases where a modifier is more suitable, especially for update forms

Consider a schema where all the fields are optional

collection = new Mongo.Collection('sample')

schema = new SimpleSchema({
  foo: {type: String, optional: true},
  bar: {type: String, optional: true},
})

collection.attachSchema(schema)

and consider this document:

doc = {
   foo: "some value"
}

<AutoForm onSubmit={ doc => collection.update( this.props.docId, { $set: {...doc} } ) } model={doc} schema={schema} />

Now if you delete the value of foo and submit, this will throw error saying that after filtering out, modifier is empty.

This is expected because collection2 trims trailing spaces, deletes empty fields, runs autovalues etc before doing the actual insert, at which time doc becomes {} so instead, we need to $unset: { foo: '' } so to mitigate this, I am currently doing this:

function handler(docId,doc) {
  const unsetDoc = schema.objectKeys
    .filter( key => !doc[key] )
    .map( key => ( {[key]: ''} ) )
    .reduce( (obj, unset) => {
      obj[Object.keys(unset)[0]] = unset[Object.keys(unset)[0]];
      return obj;
    }, {} );

  let modifier = {};

  if (Object.keys(doc).length > 0) {
    modifier.$set = {...doc}
  }

  if (Object.keys(unsetDoc).length > 0) {
    modifier.$unset = {...unsetDoc}
  }

  collection.update(docId, modifier);

}

But it would be awesome if onSubmit were able to provide me the modifier out of box, such that, the following would work:

<AutoForm 
  onSubmit={ (doc,modifier) => handler(this.props.docId, modifier) } 
  model={doc} 
  schema={schema} />

Now the original autoform has solutions similar to this:

• update form automatically handles this, providing a modifier and passing it on to the collection
• method update form which provides you a modifier and document id which you can pass on to your methods
• hooks where onSubmit passes a doc and a modifier and a formToModifier hook which directly takes the modifier whenever form fields change (like an onChange for update forms)

For code reference, you can take a look at here and here

I have an issue with adding new list items when using autosave={true} on the form. It is fine that the form is validated when new item is attached but at the moment the item does not attach on the first click.

Please have a look at the attached gif below that should explain the issue. Keep in mind that I'm clicking twice on the + icon before new items appear:

Both form and field components cause warnings on the browser console

Unknown prop `xxxx` on <yyyy> tag. Remove this prop from the element.
For details, see https://fb.me/react-unknown-prop

It seems this is new and the recommended approach is to distill the props passed on to the standard html component, and use a valid, stripped-down version of the props instead of {...props} spreading them all onto them.

https://fb.me/react-unknown-prop

The project requires a contribution guide that describes how to

• set up necessary environment
• development dependencies and how to install them (lerna and stuff)

And then we should describe

• hot contribution workflow should be
• base coding style guidelines
• things to watch out for
• things to do etc

I can not seem to access another field's value/props from within a custom component (created via connectField())

In my specific use case, I want a date range picker, where the start date becomes the minimum allowable value for the stop date... to do this, each input is it's own field/input... but they need to be able to access each other's values (and perhaps field and error too?)

I think it would be nice to have a <AutoFieldList />-component that renders a list of fields automatically
similar to aldeed:autoform's https://github.com/aldeed/meteor-autoform#afquickfields:

<AutoForm>
  <AutoFieldList />
  <SubmitField value="send" />
</AutoForm>

This allows us to easly change the style or behavior of the submit button or to add more elements inside the form without loosing the "auto-form-magic".

you could also omit fields:

<AutoForm>
  <AutoFieldList omitFields={["userId", "title"]}/>
  <SubmitField value="send" />
</AutoForm>

or include only some fields:

<AutoForm>
  <AutoFieldList fields={["title", "text"]}/>
  <SubmitField value="send" />
</AutoForm>

or group some fields:

<AutoForm>
  <div class="col-xs-6">
      <AutoFieldList fields={["title", "text"]}/>
  </div>
  <img class="col-xs-6" src="funnycatpicture.jpg" />
  <div class="col-xs-12">
      <AutoFieldList fields={["comment"]}/>
  </div>
  <SubmitField value="send" />
</AutoForm>

What do you think?

Should be easy to develop, right? AutoFieldList (or however it will be named) could receive the schema-definition by context.

For my new project I use astronomy. I'm not sure how hard it is to add support for it or if it is even possible.
Next week I have some time available and would like to implement it.
The only thing is that I don't really know where to start. But I hope with some guidance it should be possible.

Hello,
Is there a way to reset the form on submit? and if not than what would be your suggestion on doing that?

I think the ListField component is a bit confusing. If you have a lot of items it's hard to navigate.
The advantage of an accordion is that you only see one open item at a time.
Per example for bootstrap it can be accomplished with panels. See React-Bootstrap as example.
I think the user experience would be much better.
However I don't know how hard it is to implement. It is also possible to add it as an alternative to the existing ListField.

I added a field which is an array of objects, and got the wonderful nested form, but I am unable to apply a class to the child fields. If a prop was exposed to add childrenClasses, I would be able to add grid classes (or any other classes needed) to child fields. I am using the bootstrap-4 package.

I am looking to place the fields 2 per row, so I was looking to add .col-xs-12 .col-md-6 classes to the inner fields.

I'm trying to make an upload field for images.

This is my component:

import React from 'react';

import { BaseField, connectField } from 'uniforms';

import '/imports/lib/slingshot.js';

const uploadFile = (event, onChange) => {
  const uploader = new Slingshot.Upload("imageUpload");

  const image = event.currentTarget.files[0];

  // TODO: Disable input
  // TODO: Show "Loading…" or somthing

  uploader.send(image, function(error, url) {
    if (error) {  
      throw new Meteor.Error('upload-file-fail', error);
    } else {
      const file = {
        url: url,
        name: image.name,
      }
      onChange(file);
    }
  });
};

const FieldUpload = ({
  id,
  value,
  onChange,
  name,
  ...props
  }) =>

  <section {...props}>
    <input type="file"
      name="uploadFile"
      onChange={event => uploadFile(event, onChange)}
    />
    <img src={value.url} />
    <p>{value.name}</p>
  </section>
;

export default connectField(FieldUpload);

And this is my form schema:

import FieldUpload from '/imports/components/fields/FileUpload.jsx';

const FileSchema = new SimpleSchema({
  url: {
    type: String,
  },
  fileName: {
    type: String,
  },
});

const UploadSchema = new SimpleSchema({
  file: {
    type: FileSchema,
    uniforms: {
      component: FieldUpload,
    },
  },
});

export const FormSchema = new SimpleSchema({
  name: {
    type: String,
  },

  avatar: {
    type: UploadSchema,
  },

  photos: {
    type: [UploadSchema],
    minCount: 1,
    maxCount: 3,
  }
});

If I try to submit a form with all it's fields empty, the returned errors are:

Url is required
File name is required
Url is required
File name is required
Name is required

How can I return a more sensible error? like.

Avatar is required
Photos is required

Ideally:

Photos are required

Autoform (aldeed) provides options to fine tune the validation lifecycle.

It allows for setting when validation should occur. For example, after a keyup, or blur, or submit, or combinations like submitThenBlur and submitThenKeyup (default) which makes for a very configurable UX.

Furthermore, some form libraries (like formsy and redux-form) provide a concept called pristine which denotes the form has not been touched yet.

When the form is first rendered, it is pristine. And all the fields are pristine.

And if a field's value has changed (even if it has not yet been validated) that field becomes pristine: false and the form becomes pristine: false while other fields remain pristine.

What this allows is to create custom inputs or tap into the form/input lifecycle where we know if the input's or the form's internal state has changed or not and using that information for a customized UX.

note: conversation carried over from #11

On rc.15

<TextField type="password" name="password">

renders a password field, but on rc.16 this renders a normal input field.

It seems like the changes introduced by commit 6b0ed46 where we set

type={typeof props.type === 'function' ? 'text' : props.type}

instead of

type={props.type || 'text'}

is the root cause.

When using a schema definition with either min, max, or both, the field is defaulted to either the min (if min is present), max (if only max is present). This is true for schema definitions where optional : true as well. This situation occurs for both TextField and NumField.

I would expect to see a blank field instead of defaulting to either min or max, especially for an optional field.

Example code and output:

...
  'height.feet':{
    type: Number,
    optional: true,
    min: 4,
    max: 8
  },
  'height.inches':{
    type: Number,
    optional: true,
    max: 11
  },
...

            <div className='col-xs-12 col-md-4'>
              <TextField name='height.feet' placeholder='Feet' label='Height - Feet' />
            </div>
            <div className='col-xs-12 col-md-4'>
              <TextField name='height.inches' placeholder='Inches' label="Height - Inches" />
            </div>

Result:

As in comments of #30: there is some misleading with the type prop. Now every field receives its type from schema, but <TextField /> also uses this prop to determine HTML input type. I renamed type from schema to fieldType to keep <TextField /> compatible with normal <input />.

This is only an informative issue.
It will be closed immediately, but if any related issues will occur, please post them here.

If I have following Form:

<AutoForm schema={Divisions.schema} onSubmit={doc => console.log(doc)}>
  <HiddenField name="title" />
  <ErrorsField />
 </AutoForm>

I get following error:

Exception from Tracker recompute function: debug.js:41
RangeError: Maximum call stack size exceeded
    at RegExp.[Symbol.replace] (native)
    at RegExp.[Symbol.replace] (native)
    at String.replace (native)
    at underscore (http://localhost:3000/packages/aldeed_simple-schema.js?hash=a36531b7660faa5522e7fade0b3f4daf5b4b6641:98:19)
    at humanize (http://localhost:3000/packages/aldeed_simple-schema.js?hash=a36531b7660faa5522e7fade0b3f4daf5b4b6641:87:12)
    at inflectedLabel (http://localhost:3000/packages/aldeed_simple-schema.js?hash=a36531b7660faa5522e7fade0b3f4daf5b4b6641:1260:10)
    at Where.SimpleSchema.getDefinition (http://localhost:3000/packages/aldeed_simple-schema.js?hash=a36531b7660faa5522e7fade0b3f4daf5b4b6641:1826:30)
    at SimpleSchemaBridge.getField (http://localhost:3000/packages/modules.js?hash=c61c2aa9f4af54321862c6302c6fd8bc295730d8:42706:42)
    at HiddenField.getFieldProps (http://localhost:3000/packages/modules.js?hash=c61c2aa9f4af54321862c6302c6fd8bc295730d8:43310:40)
    at HiddenField.render (http://localhost:3000/packages/modules.js?hash=c61c2aa9f4af54321862c6302c6fd8bc295730d8:41903:30) string-humanize.js:34
Uncaught RangeError: Maximum call stack size exceeded[Symbol.replace] @ (program):566[Symbol.replace] @ (program):678replace @ (program):137underscore @ string-humanize.js:34humanize @ string-humanize.js:23inflectedLabel @ simple-schema.js:278SimpleSchema.getDefinition @ simple-schema.js:844getField @ modules.js?hash=c61c2aa…:42706getProps @ modules.js?hash=c61c2aa…:42745getFieldProps @ modules.js?hash=c61c2aa…:43312

I'm considering wrapping http://alsoscotland.github.io/react-super-select/react-super-select-examples.html#multiselect but my first attmpts have failed.

Again, this should return an array of values...

How do you setup a schema for this? type: [Number] and uniform.options ?

Hi there, awesome work so far, looks really promising and clean!

I found one oddity, though: In all RadioField-Variants, the value is displayed directly :

<label>{item}</label>

I think it should be: <label>{transform(item)}</label> with transform beeing a prop passed to the field.

I would do a PR, but i wanted to ask, if I understand this right?

It would be useful in my application to provide support for <input type="hidden"/>

Example:

<HiddenField name="graphics_id" value={this.context.graphic._id ? this.context.graphic._id : ''} />

I prefer to put validation errors with the field, not a list at the top of the form.

I can not seem to get any custom fields access to the error & schema
see: https://github.com/zeroasterisk/uniforms for a bootstrap4 UI, where I'm trying to update display

I see that there is a component, ErrorsField, for displaying all error messages but I could not spot a component to display a single error message for a given field.

Trying to achieve aldeed:autoform's affieldmessage helper, would this work? And if it did, could we add it to the standard packaging?

import React          from 'react';
import {connectField} from 'uniforms';

const Error = ({
    errorMessage,
    ...props
}) =>
    <section {...props}>
        {errorMessage && (
            {errorMessage}
        )}
    </section>
;

export default connectField(Error);

add support for bootstrap forms

Moved from #17:

@serkandurusoy:

@radekmie I think this has created a regression. Now the validation is constantly running and interestingly logging warnings in the console and moving the text cursor to the end of the input!

For example try entering text into the middle of an existing input that does not pass validation

notice also the logs! I'm not logging this and interestingly, I have not even submitted the form and it is not autosave either.
@radekmie I confirm that this is a regression. Reverting back to 12 fixes the problem.

I'm using AutoForm with minimal configuration on a Simple Schema that contains about 10 fields (mostly text fields, but one is an object that populates about 12 select boxes). I'm using AutoField for all of them. I've noticed that when I type in one of the text boxes, there's a very noticeable lag, and the CPU usage on my computer spikes significantly.

As I've experimented, I've noticed that any time there's more than 8 or 10 fields on the form, performance suffers badly.

Is there anything that I can do to help this situation besides not using AutoForm ?

I've actually cobbled together a simple test form that reproduces the problem: if I add 10 items to "categories" using the form below, typing into the "name" field becomes very slow and CPU-intensive:

import { SimpleSchema } from 'meteor/aldeed:simple-schema';

import _ from 'lodash';
import React from 'react';
import { AutoForm, ErrorsField, AutoField, SubmitField } from 'uniforms-unstyled';

const TestSchema = new SimpleSchema({
  name: { type: String },
  categories: { type: [String], defaultValue: [] },
});

export const getForm = () => {
  const fields = ['name', 'categories'];
  const autoFields = _.map(fields, field => <AutoField name={field} key={field} />);
  return (
    <AutoForm
      schema={TestSchema}
      onSubmit={doc => (console.log(doc))}
    >
      <ErrorsField />
      {autoFields}
      <SubmitField />
    </AutoForm>
  );
};

Hello there,

I'm trying to pass data to hidden fields in an AutoForm by setting the value prop:

<AutoField name="graphics_title" value="somestring" />

These fields fail validation until they're manually changed. What am I doing wrong?

When typing in a value, I don't want to autosave every character (when typing fast).

I'd like to wrap the autosave onSubmit with something like _.throttle(onSubmit, 2000)

Currently, I am using the model attribute

<AutoForm model={currentDocument} schema={formSchema} onSubmit=(/**/)>

to provide initial values to the form fields so that I can use the form as an update form.

Is this the correct approach?

I am working on a bootstrap themed version of a site, so i want to specify classes to inputs like this:

<input className="button button-primary" />

Can I do thath from schema specification? Something like:

Person = new SimpleSchema
  submitButton:
    uniforms:
        classNames: "button button-primary"

The issue is, I want to use bootstrap 3 structure, but with different classes

I want to be able to focus on a specific field on a form after the form submit has been handled, but could not manage to get a reference to the input of a field component I want to target.

Tried to track down some API for that but could not find one, so what would be the canonical way to get a reference for an input?

There are use cases where displaying non-schema error could be useful, e.g. displaying error returned from a method.

Right now forms error prop must be simple-schema-compatible, and Error/Meteor.Error are not.

Example usage:

<AutoForm
  error={new Meteor.Error('some-error', 'Message')}
/>

This kind of error could be displayed in ErrorsField component

TL:DR;
add an "initialCount" property for listfields

Autoform has a great feature with handling array structures where

• if there are minCount and maxCount defined on the schema
  • autoform displays minimum of minCount children ready to be filled and no [-] button
  • allows maximum of maxCount children and does not display [+] button after the last child
• if there is an initialCount defined as a property of the [Array] field
  • displays initialCount children in the first render (if it is not less than minCount)
• if the array is not optional: true (meaning it should contain at least one child)
  • always displays at least one child

This allows for better UX design for forms with nested structures.

Uniforms does take into account minCount and maxCount but it lacks an "initialCount" feature.

Therefore, uniform's handling of such arrays of fields requires user interaction to be able to render the initial child input and users get confused about it when they don't see that first child input there and only a [+] button

How can I translate validation error messages?

I would like to keep contributing to uniforms because I think it fills an important gap for meteor developers who transition from blaze to react. The seamless integration with simple schema makes this package the single most important gap-filler that was the lack of an autoform counterpart in react. There are other very powerful form libraries and they can be extended into working with simple schema yadi yada but this is the out of box thing so I think it deserves the attentio!

That all being said, I think the number one hurdle is documentation and examples. For meteor developers who are used to blaze and autoform, react is a whole new paradigm and uniforms' current documentatio can be overwhelming or unclear, although it is quite good if you know what you are dealing with and the source code is quite self-explanatory.

I would like to open up a discussion where we decide how we can empower and encourage less experienced meteor developers with and to use uniforms.

I think

• a dedicated documentation site (github pages)
• folder of examples that can be copied and run easily
• a playground like autoform.meteorapp.com

would go along way, and I sure would like to contribute to any one and all of them.

Now I know simple schema and some meteor dependencies are hard to get running in a browser-only environment so the playground would require hosting. So for starters, I would like to sponsor a 512mb digitalocean server for that.

So what do you think about the overall idea? Do you think we can tackle these?

How do you pass in an existing document to update?

When I try to pass it in as a model - values update in the form but validation no longer throws errors (I assume because it's not validating the new data??)