pnp / pnp/sp-dev-fx-controls-react
DynamicForm - Possibility to add error messages below specific fields
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 433
- Forks
- 418
- Avg merge
- 5d 6m
- Merged PRs (30d)
- 19
Description
Category
[x ] Enhancement
[ ] Bug
[ ] Question
Version
3.10.0
Expected / Desired Behavior / Question
Possibility to write error messages below each field when stopping the save in the onBeforeSubmit method. It would be nice to maybe return an object like
{"internalFieldName":"This is an error message!"}
and the dynamic form would render the message below the affected field.
Another possibility would be to create the object with all internal field names in the dynamic form, and hand it over to the "onBeforeSubmit" method for the user to add an error message to each field.
onBeforeSubmit={(listItemData, fieldValidationInfo) => {
if(listItemData["internalFieldName"] !== "Title"){
fieldValidationInfo["internalFieldName"] = "The value of this field needs to be 'Title'!"
return true;
}
return false;
}}
This would greatly improve the usability of the dynamic form!
If we decide how it should be done, I would be glad to implement the feature myself!
Observed Behavior
Currently you can only put an error message underneath or above the whole DynamicForm.
Thanks!
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the DynamicForm implementation and its existing onBeforeSubmit handling. Decide which proposed validation API is appropriate, then define completion as rendering returned field-specific messages below the affected fields while preserving the current form-level error behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100