在Angular 7中,你可以使用Reactive Forms来实现对输入的验证。下面是一个示例代码,演示如何验证一个表单输入只接受整数和浮点数值。
首先,需要在组件的模板文件中创建表单。在这个示例中,我们创建了一个包含一个输入框的表单:
然后,在组件的类文件中,需要导入相关的模块和类:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
接下来,在组件的构造函数中,初始化表单并设置相应的验证规则:
export class MyComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
myInput: ['', [Validators.pattern('^[0-9]+(\.[0-9]+)?$')]]
});
}
}
在上述代码中,我们使用了Validators.pattern
来指定一个正则表达式模式,该模式只允许输入整数和浮点数值。正则表达式^[0-9]+(\.[0-9]+)?$
用于匹配整数和浮点数值。
最后,你可以在模板中使用myForm
和myInput
来验证输入的值。例如,你可以在提交表单时检查输入值是否有效:
export class MyComponent implements OnInit {
...
submitForm() {
if (this.myForm.valid) {
// 处理表单提交
}
}
}
上述代码中的myForm.invalid
用于验证表单是否有效。如果验证规则不通过,按钮将被禁用。
希望这个例子能够帮助你实现Angular 7中的验证模式,只接受整数和浮点数值。