DynamicForm - controls are shown with error messages even if the values are assigned

[sallaadithya]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

Please specify what version of the library you are using: [3.15.0-beta.5500687]

Expected

For a column which is a 'Required' one, it should allow to enter a value. After focus is lost, if user doesn't enter any value, then it should show the error message as "You can't leave this blank".

Observed Behavior

On load of the form, the error message 'You can't leave this blank' is shown for all the columns which are set as 'Required'. This is confusing for the already existing list item which has got values.

Steps to Reproduce

Create a list, create few columns with data type 'Single line of Text', mark them as Required while creating. Use Dynamic form to create a list item, observe the columns having error message when the form loads for the first time. The behavior is the same for the existing list item (Editing list item).

Thanks!

[ghost]

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

[Fantasticles]

I am seeing this issue as well, but only when editing/opening an existing item, tested in both a web part and form customizer. When creating a new item it is working correctly for me.

[Fantasticles]

I am seeing this issue as well, but only when editing/opening an existing item, tested in both a web part and form customizer. When creating a new item it is working correctly for me.

[NishkalankBezawada]

@sallaadithya @Fantasticles I have resolved this issue, will be creating a new PR soon.

//Nishkalank Bezawada

[NishkalankBezawada]

Hello @sallaadithya & @Fantasticles,
I have created a new PR for fixing this issue, with the below solution.

Solution

In DynamicField component, the errorText is set at getRequiredErrorText method based on the property changedValue as below,

  private getRequiredErrorText = (): string => {
    const {
      changedValue
    } = this.state;
    return (changedValue === undefined || changedValue === '' || changedValue === null || this.isEmptyArray(changedValue)) && this.props.required ? strings.DynamicFormRequiredErrorMessage : null;
  }

This changedValue state is set in the constructor as below,

    this.state = {
      changedValue: props.fieldType === 'Thumbnail' ? props.fieldDefaultValue : null
    };

Resulting in having the changedValue always set to null as per above condition.

So, by setting the state as below, the issue will be resolved.

constructor(props: IDynamicFieldProps) {
    super(props);
    sp.setup({
      spfxContext: { pageContext: this.props.context.pageContext }
    });
    this.state = {
      changedValue: props.fieldDefaultValue !== undefined || props.fieldDefaultValue !== '' || props.fieldDefaultValue !== null || !this.isEmptyArray(props.fieldDefaultValue) ? props.fieldDefaultValue : null
    };
  }

Thanks,
Nishkalank Bezawada

[sallaadithya]

Hi @NishkalankBezawada, @joaojmendes,

Thanks for fixing the issue, resolved the issue on EDIT form. However, for a new item, error messages appear by default. They should appear only after the focus is out off the control.

[joelfmrodrigues]

New release just published, closing