@danyhiol Which version exactly? Can you reproduce it on https://codesandbox.io/s/github/vazco/uniforms/tree/master/reproductions?
I finally solved the issue just after posting the question. I forgot to return the model in modelTransform
function parent() {
const { value, setValue } = useContext(SomeContext);
...
const modelTransform = (mode, model) => {
if (mode === 'form') {
...
setValue(model.somefield); <- this does not work.
}
}
...
return ( <FirstChild handleModelTransform={modelTransform} ... /> )
}
forwardRef
- it depends on your case. https://reactjs.org/docs/refs-and-the-dom.html
Here's the code for the page that works fine under 2.6.5 but breaks under 3.0:
The master branch contains the working code under 2.6.5:
https://github.com/ics-software-engineering/meteor-application-template-react
The uniforms-3.0 branch contains the broken code. The only difference is app/package.json:
https://github.com/ics-software-engineering/meteor-application-template-react/tree/uniforms-3.0
Thanks for any help you can provide to point me in the right direction
@philipmjohnson I'll have to emphase it in the changelog, but it's one of v3.0.0-alpha.3 changes:
Breaking: Removed
createSchemaBridge
. This includes removal ofBaseForm.state.bridge
,check
on all bridges, and the automatic bridge creation for SimpleSchema. For motivation and more insigths see vazco/uniforms#718.
new SimpleSchema2Bridge(schema)
manually.
Unsupported field type: String!
for the single field in the schema. Funny thing is that the example works in the uniforms playground.
new GraphQLBridge(buildASTSchema(parse(`
type Log {
title: String!
}
type Query { anything: ID }
`)).getType('Log'), function (model) {}, {})
<AutoForm>
graphql@15
but uniforms are not yet updated. I mean, it'll for 99.9% just work, but due to the way how npm resolves modules, your type (got from getType
) is not an instance of the same type in uniforms, because uniforms import a separate copy of graphql@14
. Please file an issue and we'll take care of it in the following week.
Hi everyone, somewhat new to Gitter and Uniforms, but I will do my best. I am using jsonSchema and Material. I have an array of nested fields, but they don't obey the fullWidth property when nested.
"additionalFields": {
"type": "array",
"items": {
"type": "object",
"properties": {
"name": {
"type": "string",
"uniforms": {
"margin": "normal",
"variant": "outlined",
"fullWidth": "true",
"InputLabelProps": {
"shrink": "true"
}
}
},
"type": {
"type": "string",
"options": [
{
"label": "Text Input",
"value": "text-input"
},
{
"label": "Textarea",
"value": "textarea"
},
{
"label": "Select",
"value": "select"
}
],
"uniforms": {
"margin": "normal",
"variant": "outlined",
"fullWidth": true,
"InputLabelProps": {
"shrink": true
}
},
},
The layout is inline vs block for the name and type fields. Am I doing something silly? Thanks!
Hey gang. So I just tried something and seem to have resolved the issue myself. Posting here so maybe it helps someone else. Originally, I had my JSX like this:
<ListField name="additionalFields">
<ListItemField name={'$'}>
<AutoField name="name" />
<AutoField name="type" />
</ListItemField>
</ListField>
so I changed it to this:
<ListField name="additionalFields">
<ListItemField name={'$'}>
<AutoField name="name" />
</ListItemField>
<ListItemField name={'$'}>
<AutoField name="type" />
</ListItemField>
</ListField>
and now it is working correctly. Thanks!
ListField
and ListItemField
those fields are displayed inline. In the playground they are not. I don't have any custom CSS that is doing this. Anyone, have any idea why this would happen?Hi there! Thanks for making this amazing component. I'm running into a weird issue, though maybe my use case isn't supported: I'm trying to allow users of my app to build their own forms, and am letting them customize their own schema in JSON, which then gets saved to a MySQL database as a string. I then try to pull that string out of the database and convert it back into a usable object in javascript / react (Nextjs) using JSON.parse, but for whatever reason it's still being treated as a string or erroring out.
Is there a way to accomplish my goal in uniforms, or is reading the schema from an outside source like a DB not really doable?
Thanks @radekmie. It does use JSON Schema.
It's the same Guest Schema code sample from the tutorials posted on your official website. The only difference is that the schema itself comes from a string stored in MySQL. What seems to be happening are some kind of invisible characters being added during the journey when it's stored and retrieved in MySQL. The result is that the JSON from the MySQL db query is always treated like a string by the browser - even when run through JSON.parse(JSON.stringify(schema)).
Sample schema stored in db field
(shortened some fields just to fit in this window):
{
title: 'Guest',
type: 'object',
properties: {
lastName: { type: 'string' },
workExperience: {
description: 'Work experience in years',
type: 'integer',
minimum: 0,
maximum: 100,
},
profession: {
type: 'string',
options: [
{
label: 'Developer',
value: 'developer',
},
{
label: 'Tester',
value: 'tester',
},
],
},
additionalInfo: {
type: 'string',
uniforms: { component: LongTextField },
},
},
required: ['lastName'],
};
//Code from pages/[pageurl].tsx
function createValidator(schema: object) {
const validator = ajv.compile(schema);
return (model: object) => {
validator(model);
return validator.errors?.length ? { details: validator.errors } : null;
};
}
let res = await fetch(`/api/formbuilder?id=${id}`, { method: 'GET' });
let json = await res.json();
//this is the schema being returned from the MySQL query
var s = json[0][0].schema;
// remove hidden, non-printable and other non-valid JSON chars
s = s.replace(/\\n/g, "\\n") ;
.replace(/\\'/g, "\\'");
.replace(/\\"/g, '\\"');
.replace(/\\&/g, "\\&");
.replace(/\\r/g, "\\r");
.replace(/\\t/g, "\\t");
.replace(/\\b/g, "\\b");
.replace(/\\f/g, "\\f");
s = s.replace(/[\u0000-\u0019]+/g,"");
const ajv = new Ajv({ strict: false, allErrors: false, useDefaults: true });
s = JSON.parse(JSON.stringify(s));
const schemaValidator = createValidator(s);
const schema = new JSONSchemaBridge(s, schemaValidator);
Resulting console log:
https://ibb.co/H4MVgcw
Hey everyone! Would someone mind posting an example of a schema with a NestField
?
I've tried something like
{
type: "object",
properties: {
"name.firstName": {
label: "First Name",
fieldType: String
},
"name.lastName": {
label: "First Name",
fieldType: String
},
name: {
fieldType: Object,
fields: ["firstName", "lastName"]
}
}
but still get this error: Field not found in schema: "name.firstName"
Thanks in advance!
fieldType
, but I guess it meant to be a JSON schema. This should do the job:{
type: 'object',
properties: {
name: {
type: 'object',
properties: {
firstName: {
label: 'First Name',
type: 'string'
},
lastName: {
label: 'First Name',
type: 'string'
}
}
}
}
}
props.fieldType
Hi everyone, and thanks @radekmie and other people that made Uniforms as awesome as it is ! ;)
Sorry to ask if it has already been answered or, worse, if it is in the doc, but can't find it.
Is there a way to specify the Field to use in a ListField ?
Example :
// Schema declarations
const productSimpleSchema: SimpleSchema = new SimpleSchema({
name: { type: String },
description: { type: String, optional: true },
unitPrice: { type: Number },
quantity: { type: SimpleSchema.Integer, min: 1 },
tax: { type: Number, max: 100 }
});
const quoteSimpleSchema: SimpleSchema = new SimpleSchema({
title: { type: String }
products: { type: Array },
'products.$': { type: productSimpleSchema }
});
// Composite Field declaration
const ProductField = connectField(() => (
<>
<AutoField name="name" label="My product: " />
<AutoField name="description" label="Description: " />
<AutoField name="unitPrice" label="Unit Price: " />
<AutoField name="quantity" label="Quantity: " />
<AutoField name="tax" label="Tax (%): " />
</>
));
// Form declaration
<AutoForm
model={quote}
schema={quoteAutoFormSchema}
onSubmit={(quoteFormResult: QuoteSchema) => onQuoteSubmit(quoteFormResult)}
>
<AutoField name="title"/>
// Here, I would like to be able to use a ProductField for each item in the ListField
<ListField name="products" initialCount={1} />
<ErrorsField />
<SubmitField />
</AutoForm>
Ok. Following issues I've found on the Git repo, I was able to find a way to do it like so:
<ListField name="products" initialCount={1}>
<ListItemField name="$">
<ProductField name="" />
</ListItemField>
</ListField>
Is it the right way to do it ?
Or is there a simpler way, without having to define my own ListItemField ?
Maybe passing something to itemProps (not sure how to use this)
Thanks for the answer.
Actually, I already tried that, but couldn't figure out how it works.
I'm using Typescript and I got the following error :
Object literal may only specify known properties, and 'uniforms' does not exist in type
'RegExp | SimpleSchema | SchemaDefinition | BooleanConstructor | StringConstructor | NumberConstructor | DateConstructor | ArrayConstructor'.
Also, can you tell me why it may be a better solution ? I tend to believe it is not so great because it forces me to mix the schema and the ProductField
that is related to the UI.
But I'm all ears because I'm totally new to the web community, and maybe this is something common and good.
SchemaDefinition
interface, according to your needs.uniforms
property so it's at least encapsulated.Hi guys, I have a main form component that handles much of my form with fields and is defined by SimpleSchema2
.
Now I want to wrap the content of the form with some components. The useForm
hook
is quite interesting but is missing the children
Element
that one could just use in a function, wrap and return. Below is my aim. Note that no fields are defined inside the form. The form is completely auto-generated.
<AutoForm schema={bridge} ... > <SomeWrapper><SomeComponent>{children}</SomeComponent></SomeWrapper><AutoForm>
As an alternative, I could just extends
the AutoForm
. But looking at the source code, there are some mixin goind on making AutoForm
a function and not a class
. So if this is the only possible solution, how can I extends
AutoForm
to wrap it's content as described above?