Angular前端注册页面无法向后端发送POST请求求助

核心问题 #

点击提交后仅触发按钮点击日志，无后端请求，是因为onSubmit方法中表单校验this.registrationForm.invalid始终为true，代码提前return，从未执行到UserService.register调用逻辑。以下是具体问题和修复方案：

1. 表单未关联FormGroup #

原HTML的<form>标签未绑定组件中的registrationForm，Angular无法识别表单控件与FormGroup的关联关系，导致表单状态判断失效。

修复后register.component.html的form标签：

<form (ngSubmit)="onSubmit()" [formGroup]="registrationForm">

2. 输入框与FormControl绑定不匹配 #

• 邮箱输入框的name属性为mail，但FormGroup中定义的控件名是email，导致表单无法追踪邮箱字段的校验状态；
• 所有输入框混用了ngModel和响应式表单（FormGroup），导致控件值无法同步到FormGroup，进而触发表单无效判断。

修复后register.component.html的输入框部分：

<div class="form-row">
  <div class="form-group">
    <label for="exampleInputUsername">First Name</label>
    <input type="text" formControlName="fname" class="form-control" id="exampleInputUsername" placeholder="eg. John">
  </div>
  <div class="form-group">
    <label for="exampleInputUsername">Last Name</label>
    <input type="text" formControlName="lname" class="form-control" id="exampleInputUsername" placeholder="eg. Doe">
  </div>
</div>

<div class="form-row">
  <div class="form-group">
    <label for="exampleInputEmail1">Email:</label>
    <input type="email" formControlName="email" class="form-control" placeholder="eg. john@gmail.com" required>
  </div>
  <div class="form-group">
    <label>Password:</label>
    <input type="password" formControlName="password" class="form-control" required>
  </div>
</div>

3. 错误处理函数错误 #

组件中自定义的throwError函数未实现，且未导入RxJS官方的throwError，若后续触发错误会直接崩溃。

修复后register.component.ts：

• 导入RxJS的throwError：

import { catchError, tap, throwError } from 'rxjs';

• 删除组件外自定义的空throwError函数，直接使用RxJS提供的方法：

catchError((error: any) => {
  console.log('Error from server:', error);
  return throwError(() => error);
})

验证修复效果 #

1. 启动项目后，填写符合规则的邮箱（如test@example.com）、长度≥6的密码及姓名；
2. 点击提交按钮，控制台会先打印Submit button clicked，随后打印UserService中的User service register method called with user:日志；
3. 打开浏览器网络面板，能看到POST http://localhost:8080/api/register请求。

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