在Angular 5中,如果响应式表单验证错误未显示,可能是因为未正确设置验证错误消息或未正确在模板中显示错误消息。
以下是解决方法的示例代码:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
exampleForm: FormGroup;
ngOnInit() {
this.exampleForm = new FormGroup({
name: new FormControl('', [Validators.required]),
email: new FormControl('', [Validators.required, Validators.email]),
password: new FormControl('', [Validators.required, Validators.minLength(6)])
});
}
get formControls() {
return this.exampleForm.controls;
}
}
formControls
来显示错误消息:
.error {
color: red;
font-size: 12px;
}
通过以上步骤,您应该能够在Angular 5中正确显示响应式表单验证错误消息。请注意,上述示例中的代码可能需要根据您的实际需求进行调整。
下一篇:Angular 5自定义管道