optional: true :) )I have a model that uses some logic to calculate the value of a property. A model is represented as a js class instance and the property is a getter on the class.
This property is also in the schema and it shows correctly in the form (the value is filled). But, when I click the submit button, the field in the schema is empty and therefore the validation fails. What would be the best place to put this field's logic into so that the validation passes and the value gets submitted to the backend on submit?
const CommunitySchema = new SimpleSchema({
community: {
type: String,
label: 'Community',
},
});
const CommunitySchemaBridge = new SimpleSchema2Bridge(CommunitySchema);
class Record {
get community() {
return this._community || someSpecialMethodCalculatingTheCommunity();
}
set community(value) {
this._community = community;
}
}
const record = new Record();
<AutoForm
schema={CommunitySchemaBridge}
model={record}
/>
Hi @vfonic.
About the first issue: it's not uniforms problem at all. It's how SimpleSchema works - we just use validator method to create a validator function - it's up to the schema if it calls custom or not. As I remember it checked the required-ness first, then the custom validation happened.
About the second one: again, not uniforms problem. By default, SimpleSchema2Bridge calls the clean method (indirectly), which by default removes all unknown keys. In your case, it removes the _community, therefore validation fails. You have to either add it to the schema or disable cleaning.
_community to the schema. In the meantime, I made a workaround by not making community getter and setter, but a prop that holds the value (record.community = record.community || someSpecialMethodCalculatingTheCommunity();). Seems to have worked.
function createValidator(schema) {
const validator = ajv.compile(schema)
return model => {
validator(model)
if (validator.errors && validator.errors.length) {
let err = {
...new Error('Validation Error'), // best practice is to throw a real error
...{ details: validator.errors } // but we also need to add details for uniforms
}
throw err
}
}
}It's not true that you are forced to throw an object literal - you have to throw anything with a certain property. Consider this code:
throw Object.assign(new Error('Validation Error'), { details: validator.errors });It'll work correctly, as the thrown object has the details property, but also it's an Error instance. You can, of course, do it in three lines, creating the error first, then assign the property and finally throw it, or even create a custom ValidationError class.
In general, I agree that we should have used returned value, it would simplify a few things. Especially typing - it is impossible to type check it without some higher abstraction like checked errors, effects, or continuations (none available in TypeScript at the moment).
Then why is it implemented that way? Well, the first bridge ever was the SimpleSchema (the Meteor one), and its validator throws an error instead of returning it. It was perfectly fine, up to the point when we wanted to add onSubmitSuccess/onSubmitFailure and async validation. Of course, we managed to do so, but the solution is not very elegant.
What I can suggest would be to use the above workaround for now. Also, please do file an issue (just quoting your messages is 100% cool) as I plan to start a v3 milestone to track all the planned and wished features. I'll also quote this message there.
AutoForm component.
The thing with being pristine is that many fields are not focusable. If you meant an actual change, then yes, we do track it through the changedMap structure. A similar one may be used to track the pristine state.
As I'm not planning to do so, I definitely would like to provide an example of how to implement it.
getModel is not documented... Well, maybe it's even better...? Anyway, you can use it.
model prop when changes are made. The problem I am having is that there is a lag between changes to this model prop and the change in the form.
Just 1 quick question... I tried it out with a fairly simple JSON Schema, and I'm having trouble rendering array properties. It seems like it renders a field for it, but is not rendering the Add and Del buttons/icons, therefore I cannot add any data to the list field. Is this expected behaviour? Do I have to customize my form with
ListFields under the AutoForm to make this work? I'm using uniforms-bootstrap4, but the problem is the same with uniforms-bootstrap3. My JSON schema looks like this:{
"title": "Guest",
"type": "object",
"properties": {
"competencies": {
"type": "array",
"items": {
"type": "object",
"properties": {
"name": { "type": "string" }
}
}
}
}
}octicons icon package to be available in the app. Overriding the .octicon selector fixed it for me. Would be nice to implement other icons such as FontAwesome, or maybe a fallback such as a '+' or a '-' when octicons aren't available.
tslib. Could you file this in an issue, please?
ListAddField (ListDelField) prop addIcon (removeIcon) to change it: https://github.com/vazco/uniforms/blob/d3f7f852c0b8d589b7415206d31448d4c54af990/packages/uniforms-bootstrap4/src/ListAddField.tsx#L24. It's really possible to detect any font icon in the component, so it won't work like that. We should definitely mention it in the docs though.
arrays-field. simpleSchema requires using minCount to make an array not empty.