如何在 this.formgroup.value() 中获取类型为 Number 的值？

Question

提交表单组后我得到的值是

{
  "name": "Sunil",
  "age": "23"
}

我想要的是

{
  "name": "Sunil",
  "age": 23
}

我的.ts文件中的表单组如下所示

myForm : FormGroup;
this.myForm = this._formbuilder.group({
  name: [''],
  age: [null]
});

- last_seen_404

---

使用 + 将其转换为数字。翻译后的句子为：使用 + 将其转换为数字，此处是获取年龄表单控件的值。 - Florian

谢谢，它起作用了。Angular没有内置的方法来使用验证器或类似的东西吗？ - last_seen_404

你可以在每个控件上添加验证器，你可以使用 import { Validators } from '@angular/forms'。例如，如果你想要控件是必填的，你可以在构建表单时添加一个验证器数组 name: ['', [Validators.required]]。最好的方法是查看文档：https://angular.io/api/forms/Validators 尝试实现它，如果无法实现，请提出具体问题。 - Florian

@Floiran，我应该在代码的哪里添加这行？ - zodiac645

Answer 1

在发送之前进行转换。

const value = { ...this.myForm.value, age: +this.myForm.value.age };

或者您可以使用类型为数字的输入。

<input type="number" formControlName="age">

- user4676340

---

谢谢，它起作用了。Angular没有内置的方法来使用验证器或类似的东西吗？ - last_seen_404

@SunilBehera 你可以给年龄表单控件添加 Validators.pattern。 - Muhammed Albarmavi

@SunilBehera input type="number" 已经验证它是一个数字。您仍然可以使用 NaN 或使用正则表达式模式创建自己的验证。 - user4676340

验证器也会返回字符串值。 - last_seen_404

不，我的意思是你应该验证你的字符串是否可以转换为数字，但是验证器不会改变你的数据类型。 - user4676340

添加 type="number" 对我来说解决了这个问题。谢谢。 - bluefox

Answer 2

这只是另一种由rxjs驱动的解决方案，它可以在valueChanges时将输入字符串值简单地转换为数字值。

const ageFormControl = this.myForm.get('age');

ageFormControl.valueChanges
  .pipe(distinct())
  .subscribe(value => ageFormControl.setValue(+value));

StackBlitz演示

- Muhammed Albarmavi

---

感谢您的帮助。是否有任何Angular提供的内置功能，而不使用管道？ - last_seen_404

你不能像数字一样在输入元素中使用Angular管道。 - Muhammed Albarmavi