[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.