我怎么能得到一个数组的数字通过表单在Angular?

Question

我需要用户通过输入键入一个数字数组。但这样做只是将数组作为字符串返回给我。我希望我能以某种方式将字符串转换为数字数组，但我不知道该怎么做。

Component.html:

<div class="d-flex justify-content-center mt-5">
<div class="bg-white rounded-1 p-3" style="width: fit-content">
<label for="array" class="form-label">INTRODUCE LA LISTA DE NUMEROS</label>
<form [formGroup]="arrayForm" (ngSubmit)="enviarArray()">
<input
type="text"
formControlName="userArray"
id="array"
class="form-control"
aria-describedby="array"
style="font-size: 35px"
/>
<div class="text-center m-2">
<button
type="submit"
class="btn btn-dark"
style="width: 150px; height: 70px; font-size: 40px"
[disabled]=""
>
Ordenar
</button>
</div>
</form>
</div>
</div>

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: [] = []
constructor(
private arrayService: ArrayService,
private formBuilder: FormBuilder
) {
this.arrayForm = this.formBuilder.group({
userArray: ['', Validators.required]
})
}

ngOnInit(): void {}
enviarArray(){
console.log(this.arrayForm.value)
}
}

Answer 1

1)您可以使用JSON.parse()将字符串数组转换为数字数组

JSON.parse(text)

但是一定要处理异常。如果你传递的字符串不是有效的JSON那么它会抛出SyntaxError

2)然后，您可以使用array . isarray

检查解析的数据是否为数组。

const input = document.querySelector("input");
const button = document.querySelector("button");
button.addEventListener("click", e => {
const text = input.value;
let arrayOfNumber;
try {
arrayOfNumber = JSON.parse(text);
if (Array.isArray(arrayOfNumber)) {
console.log("This is valid array: ")
console.log(arrayOfNumber);
}
} catch (error) {
console.log("Wrong Array");
}
})

<input type="text" name="" id="">
<button>convert</button>