问题描述:在使用Angular的响应式表单时,验证错误消息未能正确显示。
解决方法:
ngIf
来控制错误消息的显示和隐藏。示例代码如下:
用户名不能为空
用户名长度不能少于6个字符
在上述示例中,formControlName
指令用于绑定表单控件,*ngIf
指令用于控制错误消息的显示和隐藏,form.get('username')
用于获取表单控件的状态和错误信息。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.form = this.fb.group({
username: ['', [Validators.required, Validators.minLength(6)]]
});
}
}
在上述示例中,使用FormBuilder
创建了一个响应式表单,并设置了username
字段的验证规则。
在上述示例中,使用ngSubmit
事件绑定了一个提交表单的方法onSubmit()
,当点击提交按钮时会触发表单控件的验证。
通过上述方法,可以解决Angular响应式表单验证消息未显示的问题。