在Angular表单开发中，我们经常使用is-invalid类来标记验证未通过的输入框，并配合invalid-feedback类显示错误信息。然而，有时我们会发现，当移除is-invalid类后，即使输入框未通过验证，错误信息也不再显示。这并非Angular的bug，而是CSS样式覆盖的问题。
问题分析
通常，invalid-feedback类默认会设置display: none，这意味着错误信息默认是隐藏的。当输入框未通过验证时，is-invalid类会被动态添加到输入框上。这个is-invalid类通常会设置display: block或者其他可以显示元素的值，从而覆盖invalid-feedback的display: none，使错误信息得以显示。
但是，如果移除了is-invalid类，invalid-feedback的display: none样式将不再被覆盖，错误信息就会继续保持隐藏状态，导致验证失效的假象。
解决方案
解决此问题的关键在于确保错误信息在验证失败时能够正确显示，即使没有is-invalid类。以下是几种可行的解决方案：
移除或修改.invalid-feedback类的display: none样式：
最直接的解决方案是移除.invalid-feedback类的display: none样式，或者将其修改为其他默认显示元素的值，例如display: inline或display: block。这样，错误信息就会始终显示，无论输入框是否包含is-invalid类。
.invalid-feedback { /* display: none; 移除或注释掉这行 */ display: block; /* 修改为block */}
使用Angular的响应式表单提供的hasError方法：
可以使用Angular的响应式表单提供的hasError方法来判断输入框是否存在错误，并根据结果动态地添加或移除用于显示错误信息的类。这样可以避免依赖is-invalid类。
Username is required
在这个例子中，[class.is-invalid]=”form.get(‘username’)?.hasError(‘required’) && submitted” 仅当username控件存在required错误并且表单已经提交时，才会添加is-invalid类。 同时，错误信息的显示与否也依赖于form.get(‘username’)?.hasError(‘required’) && submitted。
自定义验证器和错误显示逻辑：
可以编写自定义验证器，并在组件中处理错误信息的显示逻辑。这样可以更灵活地控制错误信息的显示方式，并避免依赖特定的CSS类。
// 自定义验证器import { AbstractControl, ValidatorFn } from '@angular/forms';export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn { return (control: AbstractControl): {[key: string]: any} | null => { const forbidden = nameRe.test(control.value); return forbidden ? {'forbiddenName': {value: control.value}} : null; };}// 在组件中使用import { FormControl, FormGroup, Validators } from '@angular/forms';import { forbiddenNameValidator } from './forbidden-name.validator';export class YourComponent { form = new FormGroup({ username: new FormControl('', [ Validators.required, forbiddenNameValidator(/bob/i) // 示例：禁止用户名包含 "bob" ]) }); get username() { return this.form.get('username'); } onSubmit() { // 处理表单提交 }}// HTML Username is required. Name cannot contain "bob".
注意事项
在修改CSS样式时，需要确保修改不会影响其他页面的样式。在使用响应式表单时，需要确保正确地获取表单控件，并使用hasError方法判断是否存在错误。在编写自定义验证器时，需要确保验证逻辑的正确性，并提供清晰的错误信息。
总结
Angular表单验证失效，通常是因为CSS样式覆盖问题导致的。通过理解is-invalid类和invalid-feedback类的工作原理，并采取适当的解决方案，可以有效地解决此问题，并确保表单验证的正确性。 建议使用响应式表单和自定义验证器，以获得更灵活和可控的表单验证体验。
以上就是Angular表单验证：移除is-invalid类后验证失效问题详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1580336.html
微信扫一扫 
支付宝扫一扫 
