在Angular 8中,你可以使用Validators
和FormControl
来设置数字输入的最小和最大值。以下是一个示例:
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-my-component',
template: `
数字太小!请输入一个大于等于{{minValue}}的值。
数字太大!请输入一个小于等于{{maxValue}}的值。
`,
})
export class MyComponent {
numberControl = new FormControl('', [
Validators.required,
Validators.min(this.minValue),
Validators.max(this.maxValue),
]);
minValue = 0;
maxValue = 100;
}
formControl
绑定输入元素,并使用numberControl.hasError
来显示错误消息。这样,用户输入的数字将受到最小和最大值的限制,并且如果用户输入了超出范围的值,将会显示错误消息。
请注意,上述示例使用了响应式表单。如果你使用模板驱动表单,你可以在input
元素上使用min
和max
属性来设置最小和最大值:
这将在用户尝试输入超出范围的值时阻止提交表单,并且浏览器会自动显示适当的错误消息。