在Angular中如何通过表单获取数字数组并将字符串转为数字数组

核心转换逻辑 #

你可以直接在提交方法enviarArray中添加字符串处理逻辑，兼容用户常用的逗号、空格作为分隔符的输入习惯，同时自动过滤无效输入：

1. 取出表单输入的原始字符串，去除首尾空白
2. 统一替换所有空格、中文逗号为英文逗号，兼容多种输入格式
3. 按英文逗号分割为字符串数组，过滤连续分隔符产生的空值
4. 遍历每一项转换为数字，过滤无法转为合法数字的无效项

修改后的完整代码 #

Component.ts 调整 #

import { Component, OnInit } from '@angular/core';
import { ArrayService } from 'src/app/services/array.service';
import { Array } from 'src/app/models/Array';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [ArrayService],
})
export class HomeComponent implements OnInit {
  arrayForm: FormGroup;
  // 调整类型为数字数组
  newArray: number[] = []
  constructor(
    private arrayService: ArrayService,
    private formBuilder: FormBuilder
  ) {
    this.arrayForm = this.formBuilder.group({
      userArray: ['', Validators.required]
    })
  }
  
  ngOnInit(): void {}

  enviarArray(){
    const inputStr: string = this.arrayForm.get('userArray')?.value?.trim() || '';
    if (!inputStr) return;

    // 统一处理分隔符，兼容空格、中英文逗号
    const processedStr = inputStr.replace(/\s+|，/g, ',');
    // 分割后过滤空值，转数字并过滤无效值
    this.newArray = processedStr.split(',')
      .filter(item => item.length > 0)
      .map(item => Number(item))
      .filter(num => !isNaN(num));

    // 处理后的数字数组可直接使用
    console.log('转换后的数字数组：', this.newArray);
  }
}

Component.html 可选优化 #

可以给输入框添加输入提示，同时绑定提交按钮的禁用状态：

<!-- 输入框添加placeholder -->
<input
  type="text"
  formControlName="userArray"
  id="array"
  class="form-control"
  aria-describedby="array"
  style="font-size: 35px"
  placeholder="请用逗号/空格分隔数字，示例：1 2,3,4.5"
/>
<!-- 提交按钮绑定禁用状态，表单无效时不可点击 -->
<button
  type="submit"
  class="btn btn-dark"
  style="width: 150px; height: 70px; font-size: 40px"
  [disabled]="arrayForm.invalid"
>
  Ordenar
</button>

效果示例 #

如果用户输入1 2,3 4.5,测试,6，最终转换得到的数字数组为[1, 2, 3, 4.5, 6]。

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