Question

我刚刚在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]
 });

Answer 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],

数字的角度形式验证

1 个答案: