繁体   English   中英

在 CxJS 中提交表单时,如何从必填表单字段中删除已访问

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

我有一个,其中有几个必填字段。 当用户提交表单时,我清除了所有字段,但随后在它们周围出现了“必需”的红色边框。 这是一个问题,因为表单应该是干净的,可以为新的提交做好准备。

提交后,我希望字段被清除,并且它们最初不应具有所需的边框。

表单.tsx

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

controller.ts

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

在 Cx 中,访问标志是内部的,不能从外部设置。 获得所需行为的一种方法是使用 ContentResolver 包装所有字段,并在提交时触发表单重新呈现。 这将重置所有字段的已访问标志。

ContentResolver将监听参数,当参数更改时,onReslove 方法将再次运行,并且它返回的所有内容都将被重新渲染,因此访问标志将被重置。

Controller:

 const controller = { onSubmit() { // submission logic... // clear all the fields this.store.delete("name"); this.store.toggle("reload"); } };

成分:

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

您可以在此处找到 Fiddle 示例: Fiddle

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM