Angular表单输入字符串转number[][]传Spring Boot后端问题

步骤1：搭建模板驱动表单 #

在组件模板中创建表单，通过ngModel绑定用户输入的edges字符串：

<form #edgeForm="ngForm" (ngSubmit)="onSubmit(edgeForm)">
  <label>Edges:</label>
  <input 
    type="text" 
    name="edges" 
    ngModel 
    placeholder="[0,3], [0,4]"
    required
  >
  <button type="submit">提交</button>
</form>

步骤2：组件中实现字符串转number[][]的逻辑 #

在组件类里编写转换逻辑，把用户输入的字符串解析成number[][]类型，再调用后端接口：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-edge-form',
  templateUrl: './edge-form.component.html'
})
export class EdgeFormComponent {
  constructor(private http: HttpClient) {}

  onSubmit(form: any) {
    if (form.valid) {
      const edgeStr = form.value.edges;
      // 先校验格式是否符合要求
      const formatRegex = /^\[\d+,\d+\](?:,\s*\[\d+,\d+\])*$/;
      if (!formatRegex.test(edgeStr)) {
        alert('请输入正确格式，例如：[0,3], [0,4]');
        return;
      }

      // 1. 去除所有空格，分割成单个子数组字符串
      const edgeParts = edgeStr.replace(/\s/g, '').split('],[');
      // 2. 逐个处理子数组，转换为number数组
      const edges: number[][] = edgeParts.map(part => {
        const cleaned = part.replace(/^\[|\]$/g, '');
        return cleaned.split(',').map(num => parseInt(num, 10));
      });

      // 3. 发送请求到后端
      this.http.post('/api/ancestor-count', { edges }).subscribe({
        next: res => console.log('提交成功', res),
        error: err => console.error('提交失败', err)
      });
    }
  }
}

后端接收（Spring Boot） #

后端可以直接用List<List<Integer>>或int[][]接收参数，定义对应的DTO即可：

@RestController
@RequestMapping("/api")
public class AncestorController {
    @PostMapping("/ancestor-count")
    public ResponseEntity<Integer> calculateAncestorCount(@RequestBody EdgeRequest request) {
        // 处理祖先数量计算逻辑
        return ResponseEntity.ok(0);
    }
}

// 请求体DTO
class EdgeRequest {
    private List<List<Integer>> edges;

    // getter、setter
    public List<List<Integer>> getEdges() { return edges; }
    public void setEdges(List<List<Integer>> edges) { this.edges = edges; }
}

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