Show something while a field is untouched, when dirty replace by feedbacks

[lamontadams]

I hate to be a pest with stupid questions.... ;)

I'm looking for a way to show some helper text on an unvalidated field and then swap it out for FieldFeedback error messages when necessary. Is there an easy way to do that?

I thought <FieldFeedback when="valid" might do what I want, but that only seems to display after the form has been validated (which makes sense). I then tried to just apply a <FieldFeedback info/> with my helper text in it, but that also doesn't show up until after a validation (and even then looks just like an error message).

So I'm looking at tracking which fields are unvalidated or validdated-and-valid (either in state or via a bunch of refs) so I can show/hide some typography inside helperText... But that feels extra dirty, so I figured it was worth asking here -- Is there a better way to do what I'm after?

[tkrotoff]

show some helper text on an unvalidated field and then swap it out for FieldFeedback error messages when necessary. Is there an easy way to do that?

Good question. I didn't consider this use case. I'm looking at it, not easy actually.

[tkrotoff]

For the moment, you have to handle this yourself. Something like:

state = {
  fieldUntouched: true
};

handleChange(e) {
  this.setState({fieldUntouched: false});
}

handleReset() {
  this.setState({fieldUntouched: true});
}

<FieldFeedbacks for="field"> // Displayed when field has been validated, i.e dirty
  ...
</FieldFeedbacks>
{fieldUntouched ? <div>Help</div> : null}

If you have any other use case that is not handled by react-form-with-constraints, I would be glad to hear. Thx.