Angular5+PHP注册表单向MySQL插入时先产生空行的问题

你遇到的「先插入空记录再插入正确记录」的问题，大概率是表单触发了两次提交：一次是浏览器自带的默认表单提交行为，另一次是你通过Angular HttpClient发起的POST请求。

原因拆解 #

你的表单绑定了(submit)="onRegisterSubmit()"，但没有阻止浏览器的默认提交逻辑。当用户点击Submit按钮时，浏览器会先按传统表单方式提交（默认是GET请求，且不会以JSON格式传递数据），这时候PHP代码读取php://input会拿不到有效参数，进而插入空值；紧接着Angular的http.post又发送了一次携带正确JSON数据的请求，所以数据库里就出现了两条记录。

解决方案1：阻止表单默认提交行为 #

修改TypeScript方法，添加事件参数并调用preventDefault()来拦截浏览器默认行为：

onRegisterSubmit(event: Event) {
  // 阻止浏览器默认提交动作
  event.preventDefault();
  
  const regFormValue = this.registerForm.value;
  this.http.post("http://localhost/ProjetErgonomie/RegUser.php", regFormValue)
    .subscribe(data => {
      this.receivedData = data;
      if (this.receivedData.success) {
        this.resultReg = "User added successfully";
      } else {
        this.resultReg = this.receivedData.errors;
      }
    }, (error) => {
      console.log(error);
    });
}

同时，模板里的submit事件要传递事件对象：

<form *ngIf="!isLogin" (submit)="onRegisterSubmit($event)" [formGroup]="registerForm">

解决方案2：禁用表单默认提交（可选） #

也可以给表单添加ngNoForm属性，直接告诉Angular不处理表单的默认提交逻辑，不过更推荐第一种方法（灵活性更高）：

<form *ngIf="!isLogin" (submit)="onRegisterSubmit($event)" [formGroup]="registerForm" ngNoForm>

额外的PHP代码优化建议 #

从你贴出的PHP代码片段来看，还有两个需要注意的点：

1. 补全完整的插入逻辑：要确保只有在所有验证通过（比如密码匹配、用户不存在）后才执行插入操作，避免无意义的空插入；
2. 防范SQL注入：不要直接拼接SQL语句，改用预处理语句更安全，示例如下：

// 替换直接拼接SQL的写法
$insertQuery = "INSERT INTO user (Firstname, Lastname, Email, Password) VALUES (?, ?, ?, ?)";
$stmt = $conn->prepare($insertQuery);
// 这里的"ssss"对应四个字符串类型的参数，可根据你的字段类型调整
$stmt->bind_param("ssss", $fn, $ln, $email, $pass); 
$stmt->execute();

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