问题描述: 在Angular 5中,动态响应式表单的模式验证不起作用。
解决方法:
示例代码:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
`,
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
email: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}')]],
});
}
onSubmit() {
console.log(this.myForm.value);
}
}
在上面的示例中,我们创建了一个动态响应式表单,并为email控件添加了模式验证(验证是否为有效的电子邮件地址)。如果用户输入的值不符合模式验证规则,则表单将被视为无效。请确保你的表单代码与此示例代码类似,并检查是否正确绑定了FormControl。