How should I use Uniforms?

How should I use the Vazco’s Uniforms (@radekmie) to automatically create forms?

I can’t manage to show my form in screen. I get nothing when I try.

This is what I did to include it on my app:

\imports\collections\uniforms.js

import SimpleSchema from 'simpl-schema';

export const SchemaUniforms = new SimpleSchema({
  name:  {
   type: String,
   optional: false,
   min: 1,
   max: 255,
   label: "Name"
   },
   address: {
   	type: String,
   	optional: true,
   	min: 1,
   	max: 80,
    label: "Device type"
   }
});

\components\uniforms\uniforms_create.js

import React, { Component } from 'react';
import { AutoForm }  from 'uniforms';

import { SimpleSchema } from 'simpl-schema';
import { SchemaUniforms } from '../../../imports/collections/uniforms';

class UniformsCreate extends Component {
	constructor(props) {
		super(props);
		console.log( {SchemaUniforms} );
	}

	handleSubmit(doc) {
    testSchema.clean(doc);
    console.log(doc);
  }

	render() {
		return (
			<div>
						<AutoForm schema={ SchemaUniforms } onSubmit={doc => console.log(doc) }  > </AutoForm>
			</div>

		);
	}
}

export default UniformsCreate;

\components\uniforms\uniforms_main.js

import React, { Component } from 'react';
import UniformsCreate from './uniforms_create';

class UniformsMain extends Component {
	render() {
		return (
			<div>
				<UniformsCreate />
			</div>
  		);
	};
};

export default UniformsMain;

Client’s console log:

Probably some basic and silly question, as I searched the internet for hours and can’t find anyone with this basic problem. A lot of people is using it and very happy with the results.

Any help, please?

Which uniforms theme module have you installed?

I wrestled with the Uniforms docs and picked through the source code for many days before I got everything right.

You can see what I did in my experimentation fork of the Meteor Mantra Kickstarter in .pkgs / mmks_book / src / client. (Not yet committed to the master project.)

If you aren’t familiar with the Mantra way of doing things you will need more help than my skimpy docs provide :disappointed: However! If you can spare the time to poke around, you’ll find a Meteor app CRUD page that uses Apollo and Uniforms all wrapped up in an easily added/removed NPM package. (I’m kinda proud of pulling all that together :blush: )

1 Like

Well, the answer is here: . Really.

<AutoForm schema={SchemaUniforms}> </AutoForm>
// Produces
React.createElement(AutoForm, {schema: SchemaUniforms}, " ");

// But
<AutoForm schema={SchemaUniforms}></AutoForm>
// Produces
React.createElement(AutoForm, {schema: SchemaUniforms});

If you are not familiar with React: the third argument is children prop. AutoForm is generated because it’s a subclass (well, kind of) of QuickForm which treats children as a user defined layout, so you don’t see anything. That’s why I recommend:

<AutoForm schema={...} onSubmit={...} />

Thank you all!

I changed to: <AutoForm schema={SchemaUniforms} onSubmit={doc => console.log(doc)} /> and now it’s working fine.

I just stated learning Meteor and react few days ago and this is a big steep for me :slight_smile:

Now I’m getting this warning but I don’t know if it’s normal because of the way Uniforms works:

I can see this old issue on Github, but it’s for an old Uniforms versión: https://github.com/vazco/uniforms/issues/90

I managed to fix the error by adding a defaultValue for all entries in the schema. Probably there is a better way…

Now I’m getting Uncaught (in promise) TypeError: event.preventDefault is not a function :frowning:

This is getting really difficult :open_mouth:

If you are using uniforms-material, then give me some time - it was already reported (actually, it’s already fixed). About this error - please, file an issue.

I’m using bootstrap3

import { AutoForm }  from 'uniforms-bootstrap3';```

I managed to get rid of the error (don’t know how exactly).

I’m now stuck in the next steep to use Uniforms.

How should I manage the onSubmit and access the data? I tried with “doc” with “event” with and without this. all ways I can image but can’t make it work.

This is my last attempt. I can’t manage to access the form fields in the “doc” object (or variable, don’t know because I don know where it comes from). The console.log(doc) shows nothing… i guess I’m very wrong with some basic concept here I can’t figure out… :frowning:

import React, { Component } from 'react';
import { AutoForm }  from 'uniforms-bootstrap3';

import { SimpleSchema } from 'simpl-schema';
import { SchemaDevice } from '../../../imports/collections/devices';

class DeviceCreate extends Component {
	constructor(props) {
		super(props);
		this.state = {error: '' };
	}

	handleSubmit(doc) {
		event.preventDefault();
		console.log("Doc: ": doc);
		});
	}

	render() {
		return (
			<div>
				<AutoForm schema={SchemaDevice} onSubmit={this.handleSubmit} />
			</div>
		);
	}
}

export default DeviceCreate;

The schema is the same one in the first post.
I already tried doc.Name, this.doc.Name and similar variations…

I tried also with 'onSubmit={this.handleSubmit(doc)}' but I get Uncaught ReferenceError: doc is not defined and with onSubmit={doc => this.handleSubmit(doc)} but always console.log(doc) and console.log(event) are both empty.

Sorry, guys, for so many basic questions, I can’t understand how there isn’t a tutorial for such a basic need on the internet (or ar least I searched for hours and was unable to find one). I hope at least this thread will be useful for somebody starting in the future, like me.

You’ve got an syntax error in handleSubmit. Try onSubmit={doc => console.log(doc)} and if it works, then it’s a problem with your component, if not, it’s a problem with the package. About the tutorial… There is a video one (link is in the readme); there are plans to make one, but… no time so far, but I’d love to have one. Or ten of them. By the way - I encourage you to join our Gitter room.

Yes, onSubmit={doc => console.log(doc)} works fine. Is with how to access this information on handleSubmit where the problem relies.

It’s getting more like a React, not uniforms question:

class DeviceCreate extends Component {
	constructor() {
		super(...arguments);

		this.handleSubmit = this.handleSubmit.bind(this);
	}

	handleSubmit(doc) {
		console.log("Doc: ", doc);
	}

	render() {
		return (
			<div>
				<AutoForm schema={SchemaDevice} onSubmit={this.handleSubmit} />
			</div>
		);
	}
}

export default DeviceCreate;

This should do the work.

It works! Thank you very much.

I’ll try to keep questions related to Uniforms here :wink:

Not sure what the status of uniforms integration with Meteor is right now, but I noticed that a few months after the last message in this thread, Vazco had a guest post on the Meteor blog about uniforms.

Thought linking to it might help others who search for Meteor and uniforms.

The status of uniforms integration with Meteor remains the same as using meteor:simple-schema is still supported. We are using it in many projects, with all bridges and most of the themes.

1 Like