How to know user is actually making changes on the form?

[vishaldenzil]

Usecase that Im trying to solve : Some pages in my webapp have embedded forms. When the user modifies the form, I want to warn him when he is moving away from the page. This is avoid accidental clicks and redirects.

Problem : I want to know when user is actually modifying the form. onFormLoad event is triggered first and onRender event is triggered next and then onChange event is triggered. The onChange event is fired while form is loading. My app would need to know when the form has fully loaded with the data and then start marking it as dirty form.

Form io version : 3.1.11

Code snippet of loading the form definition plus form data :

import React, { Component } from "react";
export default class TaskForm extends Component {
state = {
    submission_data: "",
    partial_data:"",
    userChanged : false,
    formStructure : {}
  };
componentDidMount() {
   this.setState({
    formStructure : "somme of the structure",
    submission_data : {"data"  : {"name" :"name"}}
  })
}
 rendered = () => {
    this.setState({
      userChanged : false
    })
  }

  onFormLoad = () => {
     this.setState({
      userChanged : false
    })
  };

  onChange = (e) =>{
    this.setState({
      userChanged : true
    })
  }
render() {
return(
      <Form   
          onSubmit={this.handleSubmit}
          form={this.formStructure}
          submission={this.state.submission_data}
          onFormLoad={this.onFormLoad}
          onChange={this.onChange}
          onRender={this.rendered}
        />
)

}

[travist]

If you take a look at the payload being sent to the onChange, there is a property called modified. Try the following.

onChange = (e) =>{
    if (e.modified) {
      this.setState({
        userChanged : true
      })
    }
  }

The modified flag is ONLY added when the user explicitly changes something.

[TanyaGashtold]

I am closing the issue as it was created too long ago and there are no new comments here. I hope it was resolved. If not, please reopen it. Thanks!