CxJS表单提交后如何移除必填字段的必填提示红边框

直接删除store中的字段会触发CxJS的表单验证逻辑——必填字段值被移除后，表单会判定该字段未满足必填要求，从而显示红色错误边框。而初始状态下字段未被用户触碰，验证逻辑未触发，所以不会显示提示。要解决这个问题，需要在清空字段的同时重置字段的验证状态。

方法一：单独清空字段并清除对应验证状态 #

修改controller.ts中的提交方法，将字段值设为空字符串而非直接删除，同时清除该字段的验证状态：

onSubmit() {
  // 清空字段值
  this.store.set('name', '');
  // 清除该字段的验证状态，回到初始未校验状态
  this.store.setValidationState('name', null);
}

方法二：批量重置所有字段验证状态 #

如果表单包含多个必填字段，可直接重置整个表单的验证状态，无需逐个处理：

onSubmit() {
  // 清空所有表单字段（示例为name，按需添加其他字段）
  this.store.set('name', '');
  // 重置所有字段的验证状态
  this.store.resetValidation();
}

方法三：使用Form组件的reset方法（推荐） #

如果表单用<Form>组件包裹，可直接调用其reset方法，自动完成字段清空与验证状态重置：

1. 修改form.tsx，给Form添加ref：

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

2. 修改controller.ts中的提交方法：

onSubmit() {
  this.refs.formRef.reset();
}

内容的提问来源于stack exchange，提问作者Stefan Dragicevic