角度表单验证数字答案

【问题标题】：Angular forms validation on numbers角度表单验证数字
【发布时间】：2019-02-17 19:25:21
【问题描述】：

我刚刚在 Angular 中完成了我的第一个表单验证，效果非常好。我的一些输入必须只是数字，我希望这相当容易。但是我只发现了一些非常复杂的扩展，这是真的吗？有没有简单的数字验证方法？

this.registerForm = this.formBuilder.group({
   name: ['', Validators.required],
   type: ['', Validators.required],
   imo: ['', [Validators.required]],
   dwt: ['', Validators.required],
   built: ['', Validators.required],
   yard: ['', Validators.required],
   flag: ['', Validators.required]
 });

【问题讨论】：

标签： angular

【解决方案1】：

如果您只想输入数字，只需在模板中使用正确的输入类型：

<input type="number" formControlName="built" ... >

如果您可以将输入限制为仅限数字，则无需为此添加验证器。

但是，如果您无法更改输入类型，则可以使用带有正则表达式的 pattern 验证器来检查值是否为数字：

Validators.pattern(/^-?(0|[1-9]\d*)?$/)

查看this SO question 了解有关使用数字模式验证器的更多信息。

您也可以将其包装到自定义验证器中：

import { FormControl } from '@angular/forms';

function numberOnly(control: FormControl) {
  const regex = /^-?(0|[1-9]\d*)?$/;
  return regex.test(control.value) ? null : { number: false };
}

你可以这样使用它：

built: ['', Validators.required, numberOnly],

【讨论】：

谢谢，完美。特别是只是将类型设置为数字！我也会保存另一个选项。非常感谢！