未使用FormGroup的多步表单提交页面刷新问题及单输入框表单处理咨询

嗨，我来帮你搞定这两个问题～

首先说你遇到的页面刷新问题：
这本质是浏览器的默认表单提交行为在捣乱。虽然你在submit()方法里写了路由跳转，但浏览器还是会执行传统的表单提交逻辑（也就是刷新页面），直接把Angular的路由跳转给覆盖了。解决起来很简单，只要阻止这个默认行为就行，给你两种常用方案：

方案一：在提交时阻止默认事件 #

修改模板里的表单标签，把$event传递给submit方法：

<form (ngSubmit)="submit($event)">
  <h1>Form Number 1</h1>
  <label>First Name</label>
  <input type="text" [formControl] = "firstName">
  <button type="submit">Next</button>
</form>

然后在TS文件里接收事件并阻止默认行为：

firstName = new FormControl("", Validators.required)
constructor(private route:Router, private ac:ActivatedRoute){}

submit(event: Event) {
  // 阻止浏览器默认的表单提交刷新行为
  event.preventDefault();
  // 再执行路由跳转
  this.route.navigate(["../two"], {relativeTo: this.ac })
}

方案二：修改按钮类型（更简洁） #

如果你不需要依赖表单的默认提交逻辑，直接把按钮的type从submit改成button，用点击事件触发跳转就好：

<form>
  <h1>Form Number 1</h1>
  <label>First Name</label>
  <input type="text" [formControl] = "firstName">
  <button type="button" (click)="submit()">Next</button>
</form>

这样浏览器就不会触发默认的刷新行为，直接执行你写的路由跳转逻辑。

再来说单输入框表单的处理建议：
单个输入框用FormControl完全没问题，没必要为了凑数硬套FormGroup（当然如果后续要扩展字段，提前用FormGroup也可以，看你需求）。这里给你几个优化点：

• 提交前做有效性检查：既然你加了必填验证，提交前最好先判断控件是否有效，避免空值提交：

  submit(event?: Event) {
    if(event) event.preventDefault();
    // 先检查输入是否符合要求
    if(this.firstName.valid) {
      this.route.navigate(["../two"], {relativeTo: this.ac });
      // 这里可以把输入值存在共享服务里，供后续步骤使用
      // 比如 this.formDataService.saveFirstName(this.firstName.value);
    } else {
      // 标记控件为已触碰，触发错误提示
      this.firstName.markAsTouched();
    }
  }
  

• 添加友好的错误提示：在模板里加个提示，当用户没输入就点击下一步时显示：

  <input type="text" [formControl] = "firstName">
  <div *ngIf="firstName.invalid && firstName.touched" style="color: #dc3545; font-size: 0.875rem;">
    请输入你的名字
  </div>
  

• 多步表单的数据共享：因为是多步流程，后续页面可能需要用到这个名字，建议你创建一个共享服务来存储每一步的表单数据，比用路由传参更安全（不会把数据暴露在URL里），也更方便后续步骤调用。

总的来说，单个FormControl的写法完全合理，保持简洁就好～

内容来源于stack exchange