Support for preventing submit button when form content is not changed

[kihan2518B]

Describe the bug
When attempting to update bed or staff details in the facilities section, clicking the "Update" button sends a request to the backend even if no changes have been made to the form. This results in unnecessary API calls, potentially leading to performance issues or confusion in tracking actual updates.

To Reproduce
Steps to reproduce the behavior:

1. Go to the facilities section.
2. Select a bed or staff detail to edit.
3. Without making any changes, click on the "Update" button.
4. See a network request to update the details

Expected behavior
No request should be sent if no fields are updated, and the "Update" button should remain inactive.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser Microsoft Edge

[kihan2518B]

I have got a solution for that
solution:
Initial State Tracking:

Capture the initial values of the form fields when the form is first loaded or reset.
On-Change Comparison:

Each time a field is changed, compare the current value with the corresponding initial value for that specific field.
Field-by-Field Tracking:

Maintain a flag (like hasFormChanged) that tracks if any field has been modified compared to its initial value.
Reset Logic:

If a field is changed back to its initial value, reset its modified state, ensuring hasFormChanged becomes false if all fields return to their original values.
Efficient Comparison:

Compare individual fields rather than the entire form object (avoiding JSON.stringify), resulting in better performance and accuracy.
Edge Case Handling:

Ensure that if a field is changed but reverted back to the original value, it doesn't falsely indicate that the form has changed.

Can anyone assign me this issue?

[rithviknishad]

Let's have this feature in the Form component itself instead.

This way all usages of the Form component would get this feature enabled in one go and not just the form specified in the issue.

We could upgrade the Form component to have a isDirty state. And in the onChange we could set isDirty to true. And the submit button managed by the Form component could be disabled based on this isDirty state.

[kihan2518B]

yaa sure that would also work.
@rithviknishad can you assign this issue to me

[kihan2518B]

I had made necessary changes in the form component.
but this is applying to only patient update form as we have use Form only in PatientRegister component.

For other components like BedCapacity,StaffCapacity, etc we are not using Form component.

So for that I had a solution by manually adding isDirty state to all component.

solution:

[rithviknishad]

let's switch those to use the Form component instead

[rithviknishad]

@kihan2518B can we also do the same for what's mentioned in #8982?

[kihan2518B]

Yaa sure I will make those component use the form component so that the issues are solved correspondingly