pnp / pnp/sp-dev-fx-controls-react

DynamicForm - Possibility to add error messages below specific fields

Open
#1,298 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

type:enhancement
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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.