角度 8 :使表单生成器仅接受具有纬度和经度范围的数字

Question

如何让FormBuilder需要数字？

我正在为纬度和经度编写一个表单构建器。 在下文中，

• 写入 -91 或 91 将给出验证错误，按预期工作
• -90 到 90 之间的任何东西都很好。
• 它接受最多 32 位和小数点的数字，也可以工作

问题：

• 但是，输入字母"abcd"等不会给出验证错误。

如何解决这个问题？

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

如果可能的话，更喜欢在表单中进行验证，而不是输入文本框类型=数字，

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}/)
]
]

演示 🚀🚀

Answer 2

你也可以用ng2-validation library来做

import { CustomValidators } from 'ng2-validation';

范围

new FormControl('', CustomValidators.range([10, 20]))

数字

new FormControl('', CustomValidators.digits)

将其用作

latitude: [null,
[CustomValidators.digits,CustomValidators.range([-90, 90])]         
]