Get all fields / touched fields

[bkniffler]

Hey, could we expose a function that returns all fields and/or all touched fields? Or maybe an option to validateFields { touchedOnly: true } to only return those that were touched?

Would be pretty cool to only save actually changed fields through a patch method to the server instead of all values, even those that didn't change.

[paranoidjk]

i think you can use isFieldsTouched and getFieldsValue to do this.

[bkniffler]

Could you please elaborate? isFieldsTouched returns true/false if something changed and getFieldsValue returns field values.

How can I get all the fields that changed? This should be really common in case that you don't want to have classic PUT/POST, but PATCH methods that will only send the changed form data.

Imagine a form with tabs and 30 fields. If only the "name" field changed and the save button is clicked, I'd like to run a method that will return ["name"] or have a possibility to implement that without needing to attach onChange on every single form item.

[paranoidjk]

isFieldsTouched can receive params，like a array of field names. please read api doc carefully

[bkniffler]

Okay, since I'm not sure if I'm making myself clear, here an example:
https://www.webpackbin.com/bins/-KlSiBx4TBghlGriZJF9

Just change the field "name" to something like "Name1" and click save. It works, but only due to

const transform = (obj, arr = [], parent = '') => {
  if (!obj) return [];
  if (parent) parent = `${parent}.`;
  Object.keys(obj).forEach(key => {
    const fullKey = `${parent}${key}`;
    if (obj[key] && typeof obj[key] === 'object') {
      transform(obj[key], arr, fullKey);
    } else {
      arr.push(fullKey);
    }
  });
  return arr;
};
const onClick = (form) => () => {
  const value = form.getFieldsValue();
  // Get an array of changed fields
  const arr = transform(form.getFieldsValue()).filter(x => form.isFieldTouched(x));
  // Get the final object with only changed keys
  const final = form.getFieldsValue(arr);
  console.log(final);
};

1. Is there a better way to achieve what I'm trying to do?
   1 b. If not: Wouldn't it more sense to add "getChangedFields" to return an array of the changed fields and/or "getChangedFieldValues" that returns an object with only the changes applied (like my above example) to the form? This shouldn't be too hard since that stuff is already present in the form state, isn't it?

[paranoidjk]

Sorry, i was wrong,isFieldsTouched can not achieve your requirements.
isFieldsTouched(names: String[]): Bool: Whether one of the inputs' values had been change.

But you can do it by use isFieldTouched to loop all your fileds.

cc @benjycui

[bkniffler]

Yes, thats what I'm doing right now, but it would be better if we had an easy to use function instead of what I'm doing in the example above :)

I suggest

• getTouchedFields(): [String] => Returns array of changed field-keys like ['user.name', 'comment']
• getTouchedValues(): Object => Returns object with changes like { user: { name: 'XY' }, comment: 'xy' }

[agonbina]

I also ran into this issue just now actually, I want to know if any of the values for any of the input fields within the form has changed or not. Is touched will be true as soon as there is some interaction with the input field, but that doesn't mean that the field is "dirty". Basically there is no easy way to know if one(or more/all) of your fields are dirty. This is useful when you want to enable a submit button only if the form is "dirty".

The suggested getChangedFields() method by @bkniffler would suffice for my use case.
Or having an explicit form.isDirty() => boolean method which calls into getChangedFields would be even better :)

BTW this is pretty common requirement for a piece of UI when using forms. While you could do all kinds of deep equality checks to accomplish this, it feels pretty dirty. Moreover I assume that there is a map in rc-form which is already keeping track of this stuff.

[benjycui]

isFieldsTouched and isFieldTouched is for https://ant.design/components/form/#components-form-demo-horizontal-login

If you want to know which fields are changed, you can diff final fields and initialValue.

[bkniffler]

Diffing isn't nearly as good a solution as exposing the functions. You are already storing the dirty state of each field, why not expose the methods then? I really don't understand why we should redundantly diff the data. I also see a few problems with diffing (using multiple sources for initialValue, having a ton of fields that need to be diffed, diffing nested fields / deep-diffing).

Please consider exposing the functions, I suppose its only a few lines of code necessary.

Also, stating that isFieldsTouched/isFieldTouched is only for one specific use-case is strange. Why do you store the dirty state per field then instead of one dirty state for the whole form, if its only to disable the save button?

[agonbina]

@benjycui keep in mind that there is also a performance hit if you rely on diffing(ex on every render). Moreover doing deep equality checks of JS maps is tricky and can result in inconsistent outcomes.

[benjycui]

Actually, rc-form can not get all the dirty fields easily now. Because the data structure of nested fields. So, rc-form need to traverse the whole tree to find out dirty fields..

[benjycui]

Maybe later, but I am not going to implement this feature recently.