我在表单校验信息上遇到了一个问题。

我在整个应用中使用Bootstrap，并且有一个用于添加设备的表单，它通过Bootstrap模态框显示。一直工作正常，问题在于我再次点击“添加设备”时，会出现一堆错误信息。

问题显然在于touched这个布尔值在提交后没有被重置，但我不知道该如何重置它。

抱歉，我的英语说得不太好。

@if (addForm.name().invalid() && addForm.name().touched()) {
  <div class="error">
    @for (error of addForm.name().errors(); track error.kind) {
      <span>{{ error.message }}</span>
    }
  </div>

解决方案

请参考文档，尝试使用官方推荐的重置状态方法。

提交后重置表单

成功提交表单后，你可能希望将其恢复到初始状态——清除用户交互历史和字段值。reset() 方法会清除touched与 dirty标志。你也可以向reset() 传入一个可选值来更新模型数据：

export class Contact {
  private readonly INITIAL_MODEL = {name: '', email: '', message: ''};
  contactModel = signal({...this.INITIAL_MODEL});
  contactForm = form(this.contactModel, {
    submission: {
      action: async (f) => {
        await this.api.sendMessage(this.contactModel());
        // Clear interaction state (touched, dirty) and reset to initial values
        f().reset({...this.INITIAL_MODEL});
      },
    },
  });
}

HTML:

确保表单按钮的类型为 submit。

<form [formRoot]="contactForm">
  <input [formField]="contactForm.name" />
  <input type="email" [formField]="contactForm.email" />
  <input type="text" [formField]="contactForm.message" />
  <button type="submit">Register</button>
</form>