markAsUntouched() / markAsPrestine() doesn't update invalid/dirty on submit button.

[Bullace]

Hello,

I'm having an issue where I want the submit button to re-disable once a form is submitted. In my submithandler I'm calling markAsUntouched() on the form, if I console.log the entire form after I can see that dirty is set to false again however the button never seems to get the updated value and stays enabled.

My render looks like this: render={({ get, invalid, dirty }) => { And my button: <button type="submit" disabled={invalid || !dirty}>

I have no clue how to (quickly) setup a plunker (or whatever) to demonstrate the issue but I did mess around in the codesandbox.io examples and I can't seem to get it to function in there either.

Kind regards, Jan-Jelles van Stormbroek

[bietkul]

Hey @Bullace These functions (markAsUntouched & markAsPristine) do not call the state changes when called explicitly ( default ). If you are using the latest version then you can pass an extra argument to tell that there is a need of state change.

For example:

markAsUntouched({ emitEvent: true })

But remember that markAsPristine does not support emitEvent: true yet.

[Bullace]

Okey that seems to work but it created another issue. Now when I edit a field and unfocus from it the button doesn't update, only when I then touch a field and edit the value again will the button enable. When I log the entire form inside FieldGroup render I can see that touched does get updated to true but the button simply stays disabled. Using: render={({ get, invalid, touched }) & disabled={invalid || !touched}. Already on the latest version.

[bietkul]

Can you please share the code snippet of what you're trying to achieve, it'll be helpful.

[Bullace]

https://codesandbox.io/s/jlk2kolk1y

What I expect: Click on firstname field, enter a character, submit button becomes available. What I get: Click on firstname field, enter a character, nothing happens, unfocus field, refocus any field, enter character, button becomes available.

[bietkul]

Ok I got you're point, I'll fix it asap. For now I think that pristine property will work for your use case.

disabled = { invalid || pristine }

[Bullace]

Well the problem with using prisitine is that, as you stated before, markAsPristine doesn't support the emitEvent: true functionality. I guess I'll just wait for the fix ;)

[bietkul]

You can use the reset method of control to reset the form state after clicking on submit button. Check out the reset method

[Bullace]

Okey, that works but I probably should've specified it's for an update form that shouldn't be emptied, having to manually set all data again is a bit of a pain because of how the data is returned to me (simply spreading ain't possible). I'll use this method for now but I'd prefer a proper fix.

[bietkul]

You don't need to set data manually just pass the form value in reset for example:

this.form.reset(this.form.value);

Btw that's the ideal solution for the problem that you're looking for but we need to find a way to handle view updates in the best way when these ( markAsPristine, markAsDirty etc) functions called explicitly.

[Bullace]

Alright, thanks!

[bietkul]

Fixed in the latest release.