Angular单选按钮数据提交异常：仅news分类可提交

一、前端代码排查 #

• 单选按钮绑定校验：确保所有单选按钮的name属性完全一致，[(ngModel)]绑定的变量能同步选中值，且value属性与分类名（news/birthday/anniversary/obituary）完全匹配（注意大小写一致）。
  错误示例：

  <!-- 错误：value值首字母大写，与后端接口命名不匹配 -->
  <input type="radio" name="category" [(ngModel)]="selectedCategory" value="News">
  <input type="radio" name="category" [(ngModel)]="selectedCategory" value="Birthday">
  

  正确示例：

  <input type="radio" name="category" [(ngModel)]="selectedCategory" value="news">
  <input type="radio" name="category" [(ngModel)]="selectedCategory" value="birthday">
  <input type="radio" name="category" [(ngModel)]="selectedCategory" value="anniversary">
  <input type="radio" name="category" [(ngModel)]="selectedCategory" value="obituary">
  

• 提交逻辑校验：确认表单提交时，是动态使用selectedCategory变量，而非硬编码为news。
  错误示例：

  // 错误：固定传递news分类
  onSubmit() {
    this.apiService.submitData({ category: 'news', ...this.formData }).subscribe();
  }
  

  正确写法：

  onSubmit() {
    this.apiService.submitData({ category: this.selectedCategory, ...this.formData }).subscribe();
  }
  

二、API服务代码排查 #

检查服务是否动态拼接分类接口，而非固定请求news接口：
错误示例：

// 错误：硬编码请求news接口
submitData(data: any) {
  return this.http.post('/api/news', data);
}

正确写法：

// 正确：根据传入的分类动态拼接接口路径
submitData(data: any) {
  return this.http.post(`/api/${data.category}`, data);
}

三、Node.js后端代码排查 #

• 路由配置校验：确保为所有分类配置了对应路由，而非仅处理news：
  错误示例：

  // 错误：仅配置news接口
  app.post('/api/news', (req, res) => { /* 处理逻辑 */ });
  

  正确示例：

  // 为所有分类配置独立路由
  app.post('/api/news', (req, res) => { /* 处理news分类逻辑 */ });
  app.post('/api/birthday', (req, res) => { /* 处理birthday分类逻辑 */ });
  app.post('/api/anniversary', (req, res) => { /* 处理anniversary分类逻辑 */ });
  app.post('/api/obituary', (req, res) => { /* 处理obituary分类逻辑 */ });
  
  // 或使用动态路由简化配置
  app.post('/api/:category', (req, res) => {
    const category = req.params.category;
    // 根据category执行对应数据库操作
  });
  

• 参数获取校验：确认后端正确获取分类参数，未默认使用news：
  错误示例：

  // 错误：固定使用news分类
  const category = 'news';
  

  正确写法：

  // 从路由参数或请求体获取分类
  const category = req.params.category || req.body.category;
  

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