Clash Royale CLAN TAG#URR8PPP

Uniforms: Creating custom field

I have the following Simple Schema defined:

import SimpleSchema from 'simpl-schema';

export const Comments = new Mongo.Collection("comments");

export const CommentsSchema = new SimpleSchema(
comments: Array,
"comments.$": Object,
"comments.$.author": String
"comments.$.text": String
)


And I have a component with AutoForm to view/edit this comments array:

AutoForm

import ErrorsField, SubmitField, ListField from "uniforms-semantic";
import AutoForm from 'uniforms-semantic/AutoForm';

<AutoForm schema=CommentsSchema onSubmit=comments => this.updateRequest(comments) model=this.props.comments>
<ListField name="comments"/>
<ErrorsField/>
<SubmitField/>
</AutoForm>


this.updateRequest(...) is a function that calls Meteor backend function that updates Mongo collection.

this.updateRequest(...)

I would like to customize ListField so that for each comment the "comments.$.text" TextField is displayed as a bigger text box with newlines allowed.

ListField

"comments.$.text"

It's currently just a single line string:

I considered rewriting a custom version of ListField but that seemed unnecessarily complicated for a small change like that. What is the best way to do add small customization like this using uniforms API?

ListField

TextField

1 Answer
1

Looking at the docs, it appears you can specify the inner workings of ListField. This is untested, but I would guess something along these lines:

<ListField name="comments">
<ListItemField name="$">
<NestField name="">
<TextField name="author" />
<LongTextField name="text" />
</NestField>
</ListItemField>
</ListField>

https://github.com/vazco/uniforms/blob/master/INTRODUCTION.md#props-propagation

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.