[Dynamic Form][3.17] Required Field Validation won't work

[wuxiaojun514]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 3.17 ]

Expected / Desired Behavior / Question

Dynamic Form should stop submission if there is any empty required field.
However this functionality won't work as expected after I upgraded to 3.17

Observed Behavior

[Dynamic Form] changed a lot in new version. I noticed that it will still submit item even the required field is empty

Steps to Reproduce

1. Choose a list which has a required field (e.g. title)
   
2. Put "Dynamic Form" in the spfx form customization, no special settings.

     <DynamicForm
          context={this.props.context}
          listId={this.props.context.list.guid.toString()}
          listItemId={this.props.context.itemId}
          onSubmitted={(listItemData: any) => {
            console.log(listItemData);       
              setTimeout(() => {
                this.props.onSave();
              }, 1000);
          }} 
          onListItemLoaded={async (listItemData: any) => { // eslint-disable-line @typescript-eslint/no-explicit-any
            console.log(listItemData);
          }} />

3. Launch it, and leave this required field empty and save it.
   

4. You will see you created a new item which keep this required field empty
   

Trouble Shooting

This is due to the latest "Dynamic Form" changed a lot of things. The initial value of "field.newValue" is "undefined" not "null"

I will do more testing on it.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[joelfmrodrigues]

@wuxiaojun514 , the fix for this has finally been merged, apologies for the long delay.
The fix is now included in the beta release, please let us know if there are any issues.