Angular 8 : Make FormBuilder Accept Numbers Only with Range for Latitude and Longitude

Question

如何让 FormBuilder 要求数字？

我正在为纬度和经度编写表单构建器。
在这下面，

写入 -91 或 91 将产生验证错误，按预期工作

-90 和 90 之间的任何东西都很好。

它接受最多 32 位数字和小数点的数字，也可以使用

问题:

但是，输入字母“Abcd”等不会出现验证错误。

如何解决这个问题？

  'latitude': [null, [Validators.maxLength(32), Validators.min(-90), Validators.max(90)]],

如果可能，最好在表单中进行验证，而不是输入文本框 type=number，

Answer 1

您可以使用输入类型编号这将阻止任何字母

<input type="number" formControlName="latitude" />

使用 Validators.pattern 仅允许数字的另一个选项，如果您输入了无效字符，这会将控件设置为无效。

   latitude: [
        null,
        [
          Validators.maxLength(32),
          Validators.min(-90),
          Validators.max(90),
          Validators.pattern(/\-?\d*\.?\d{1,2}/)
        ]
      ]

demo 🚀🚀