在Angular中,表单验证器可以在初始加载时不起作用是因为默认情况下,表单验证器只会在用户与表单进行交互后才会触发验证逻辑。但是,你可以通过手动调用updateValueAndValidity
方法来强制表单验证器在初始加载时起作用。
以下是一个示例,展示了如何在初始加载时触发表单验证器:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
email: ['', [Validators.required, Validators.email]]
});
// 手动调用updateValueAndValidity方法来触发表单验证器
this.myForm.updateValueAndValidity();
}
}
ngIf
指令来显示验证错误信息:
在上述示例中,ngOnInit
方法中调用了updateValueAndValidity
方法来强制触发表单验证器。然后,在模板中使用ngIf
指令来判断表单控件的验证状态,并显示相应的错误信息。
这样,无论是初始加载还是用户与表单进行交互,都会正确地显示表单验证错误信息。