-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to get rawErrors
for parent schema or errorSchema
in custom BaseInputTemplate
#4271
Comments
If you look at the raw Ajv errors in the playground when you submit an empty username / password (pasted below), you will see that neither of the individual username nor password fields are marked as having an error. So RJSF has no idea that the errors should be applied to these fields in particular. Some other options are to write custom logic and transform the errors to specifically mark the IDs of the fields where there are errors, or to restructure your schema to use Raw Ajv errors: {
"errors": [
{
"instancePath": "/authentication",
"schemaPath": "#/properties/authentication/allOf/0/then/required",
"keyword": "required",
"params": {
"missingProperty": "usernameAndPassword"
},
"message": "must have required property 'usernameAndPassword'",
"schema": [
"usernameAndPassword"
],
"parentSchema": {
"properties": {
"usernameAndPassword": {
"type": "object",
"properties": {
"username": {
"type": "string",
"title": "Username"
},
"password": {
"type": "string",
"title": "Password"
}
},
"required": [
"username",
"password"
]
}
},
"required": [
"usernameAndPassword"
]
},
"data": {
"credentialType": "username"
}
},
{
"instancePath": "/authentication",
"schemaPath": "#/properties/authentication/allOf/0/if",
"keyword": "if",
"params": {
"failingKeyword": "then"
},
"message": "must match \"then\" schema",
"schema": {
"properties": {
"credentialType": {
"const": "username"
}
}
},
"parentSchema": {
"if": {
"properties": {
"credentialType": {
"const": "username"
}
}
},
"then": {
"properties": {
"usernameAndPassword": {
"type": "object",
"properties": {
"username": {
"type": "string",
"title": "Username"
},
"password": {
"type": "string",
"title": "Password"
}
},
"required": [
"username",
"password"
]
}
},
"required": [
"usernameAndPassword"
]
}
},
"data": {
"credentialType": "username"
}
}
]
} |
Thanks nick for the response, I agree and don't think the issue is with RJSF itself. I also appreciate the additional suggestions you provided, below you will find some of my thoughts for each one. Let me know what you think.
Did not know about this. Do you know why we don't pass
Are you able to expand further how I could accomplish this? I already use
I'm trying to find a "generic" solution and rather not tie my logic to these specific username/password fields. I am working on a library that is used for different use cases so having it tied to these to fields would be a PITA. Finally, do you have any insight if we could pass the full |
I managed to make the ajv validation catch the individual username and password fields using dependencies. {
"type": "object",
"required": [
"authentication"
],
"properties": {
"authentication": {
"title": "Authentication",
"type": "object",
"properties": {
"credentialType": {
"title": "Credential type",
"type": "string",
"default": "username",
"oneOf": [
{
"const": "username",
"title": "Username and password"
},
{
"const": "secret",
"title": "SSO"
}
]
}
},
"dependencies": {
"credentialType": {
"allOf": [
{
"if": {
"properties": {
"credentialType": {
"const": "username"
}
}
},
"then": {
"properties": {
"usernameAndPassword": {
"type": "object",
"properties": {
"username": {
"type": "string",
"title": "Username"
},
"password": {
"type": "string",
"title": "Password"
}
},
"required": [
"username",
"password"
]
}
},
"required": [
"usernameAndPassword"
]
}
},
{
"if": {
"properties": {
"credentialType": {
"const": "secret"
}
}
},
"then": {
"properties": {
"sso": {
"type": "string",
"title": "SSO"
}
},
"required": [
"sso"
]
}
}
]
}
}
}
}
} If you want to pass the full errorSchema to the BaseInputTemplate you need to build a custom ObjectField and ArrayField that passes the full errorSchema to its properties/items. |
Hi @abdalla-rko - thanks for the reply, I tried the new schema you provided in this playground but it does not appear to be working? What I'm I missing? https://stackblitz.com/edit/vitejs-vite-1ntklb?file=src%2FApp.tsx
Do you have any examples or pointers on how to do this? My understanding is you would need to use something like
|
Sorry, I gave you a schema without testing it on your playground, but it works on the rjsf playground. It seems to work on the rjsf playground because the formData editor is initially an empty object and it changes when the computedDefaults are set with the following value : {
"authentication": {
"credentialType": "username"
}
} The formData editor will update the formData state which passed to the rjsf Fom and this triggers a componentDidUpdate in the form, which will try to get computedDefaults again. However now the difference is that it has the previous set computedDefault as formData (the json object above) and because of this the dependencies get resolved and formData will be set to: {
"authentication": {
"credentialType": "username",
"usernameAndPassword": {}
}
} So this is a bug in our computedDefault method in the getDefaultFormState file in Utils. I'll work on it and create a pr. For now you can do a workaround where you make formData observable and update the formData state after the componentDidMount which results in the same behavior as in the rjsf playground. As for how to pass the full errorSchema to the BaseInputTemplate, sorry I have not tried this and I don't have any examples or pointers. |
* Fixed issue with dependencies computedDefaults * update changelog * refactoring based on feedback * created tests for the new created methods * organized file based on feedback * Update CHANGELOG.md --------- Co-authored-by: Abdallah Al-Soqatri <abdallah.al-soqatri@aspentech.com> Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>
Hi @abdalla-rko - Thanks for getting #4282 over the line, unfortunately it seems we have not fully fixed the issues with dependancies yet. I tested the new version ( You will notice that if you hit submit before interacting with the form the username and password will not be marked as error state. Looking at the Let me know if you have any thoughts on this, i do plan to dig deeper into the issue but wanted to hear your thoughts since you are more familiar. |
Hi @alfonsoar, you're still using @rjsf/utils v5.20.0(check package-lock.json). This is because you're not installing the latest @rjsf/utils and @rjsf/core has @rjsf/utils v^5.20.x as a peer dependency. I have tested it with @rjsf/utils v5.21.1 in your example and it works as expected. So just include @rjsf/utils it in your package.json. |
Hi @abdalla-rko - Thanks for highlighting that! it's all working as expected. Thanks again for all the help here |
Prerequisites
What theme are you using?
core
What is your question?
I am specifying a custom
BaseInputTemplate
andObjectFieldTemplate
in my project. My schema is complex enough that I have a nested properties inside of aallOf/if/then
schema. See example: https://stackblitz.com/edit/vitejs-vite-srg8et?file=src%2FApp.tsxIn the example above, when you submit without entering any information you will see validation failed. But the inputs will not be in an error state since we do not have anything in the
rawErrors
prop being passed to theBaseInputTemplate
.How do I get the
rawErrors
from the parent schema (in this case it would beusernameAndPassword
) in this field? Alternatively is it possible to pass the fullerrorSchema
to theBaseInputTemplate
instead?note: I understand I can get the
errorSchema
fromErrorListTemplate
but this means I would need to pass it down via context which I don't think is ideal.If you switch the auth type to "SSO" and submit without entering information you will observe the input in a error state.
The text was updated successfully, but these errors were encountered: