How to remove visited from required form fields, when the form is submitted in CxJS

Question

I have a from which has couple of required fields. When users submits the form, I clear all the fields, but then I get the 'required' red border around them. This is a problem, because the form shroud be clean, ready for a new submission.

After submission, I expect fields to be cleared and they should not have the required border initially.

form.tsx

<TextField value-bind="name" required />
<Button text="Submit" onClick="onSubmit" />

controller.ts

onSubmit() {
    this.store.delete("name");
  }

Answer 1

In Cx, the visited flag is internal, and cannot be set from the outside. One way to get the desired behavior is to wrap all the fields with ContentResolver, and on submission trigger form re-rendering. This will reset the visited flag for all the fields.

ContentResolver will listen to the params, and when a param is changed, the onReslove method will run again, and everything that it returns will be re-rendered, therefore the visited flag will reset.

Controller:

const controller = {
  onSubmit() {
    // submission logic...

    // clear all the fields
    this.store.delete("name");
    this.store.toggle("reload");
  }
};

Component:

<div controller={controller}>
      <ContentResolver
        params-bind="reload"
        onResolve={() => (
          <cx>
            <TextField value-bind="name" required />
          </cx>
        )}
      />

      <Button text="Submit" onClick="onSubmit" />
 </div>

You can find the Fiddle example here: Fiddle