本文旨在解决 Angular 表单验证中，移除 input 元素的 is-invalid 类后，验证信息不再显示的问题。通过分析原因，我们发现问题的关键在于 CSS 样式的 display 属性。本文将提供详细的解释和解决方案，帮助开发者正确处理 Angular 表单验证的样式问题。
问题分析
在 Angular 表单验证中，我们通常会使用 ngClass 指令动态地添加或移除 CSS 类，例如 is-invalid，来控制验证信息的显示。当表单验证失败时，is-invalid 类会被添加到 input 元素上，从而显示错误信息。
然而，如果在移除 is-invalid 类的同时，错误信息仍然无法显示，这很可能是因为错误信息元素（例如，带有 .invalid-feedback 类的元素）的默认样式设置了 display: none。
当 is-invalid 类被添加时，通常会通过 CSS 规则将其 display 属性覆盖为 block 或其他可见的值，从而显示错误信息。但是，一旦移除了 is-invalid 类，错误信息元素就会恢复到默认的 display: none 状态，导致错误信息无法显示。
解决方案
要解决这个问题，需要确保错误信息元素在没有 is-invalid 类时仍然可见。以下是几种解决方案：
移除 .invalid-feedback 类的 display: none 样式：
这是最直接的解决方案。找到定义 .invalid-feedback 类的 CSS 规则，并移除 display: none 属性。这样，错误信息元素始终可见，无论是否添加了 is-invalid 类。
.invalid-feedback { /* display: none; 移除此行 */ width: 100%; margin-top: 0.25rem; font-size: 0.875em; color: #dc3545;}
使用其他方式控制错误信息的显示：
可以使用 Angular 的 *ngIf 指令或其他条件渲染方式来控制错误信息的显示。例如，可以根据表单控件的 errors 属性来决定是否显示错误信息元素。
Username is required
在这种情况下，ngClass 和 is-invalid 类不再是必需的。
修改 is-invalid 类的样式：
可以修改 is-invalid 类的样式，使其不仅改变 display 属性，还改变其他视觉属性，例如颜色或边框。这样，即使错误信息元素始终可见，也可以通过 is-invalid 类来突出显示错误。
.is-invalid { border-color: #dc3545;}.is-invalid + .invalid-feedback { /* 使用相邻兄弟选择器 */ display: block; /* 确保错误信息显示 */}
这种方法需要配合HTML结构，确保错误信息元素紧跟在输入框后面，并且使用相邻兄弟选择器来控制其显示。
示例代码
以下是一个简单的示例，展示了如何使用 *ngIf 指令来控制错误信息的显示：
// app.component.tsimport { Component } from '@angular/core';import { FormBuilder, FormGroup, Validators } from '@angular/forms';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { form: FormGroup; submitted = false; constructor(private fb: FormBuilder) { this.form = this.fb.group({ username: ['', Validators.required] }); } get f() { return this.form.controls; } onSubmit() { this.submitted = true; if (this.form.invalid) { return; } alert('SUCCESS!! :-)nn' + JSON.stringify(this.form.value, null, 4)); }}
Username is required
在这个示例中，*ngIf 指令根据 submitted 和 f[‘username’].errors 的值来决定是否显示错误信息。
注意事项
确保 CSS 样式表的优先级正确，避免被其他样式覆盖。使用浏览器开发者工具检查错误信息元素的 display 属性，以确定问题所在。根据实际需求选择合适的解决方案，并进行适当的调整。
总结
在 Angular 表单验证中，is-invalid 类通常用于控制错误信息的显示。但是，如果错误信息元素默认隐藏，移除 is-invalid 类后，错误信息可能无法显示。为了解决这个问题，可以移除错误信息元素的 display: none 样式，或者使用 *ngIf 指令或其他条件渲染方式来控制错误信息的显示。通过理解问题的根本原因并采取适当的解决方案，可以确保 Angular 表单验证的正确性和用户体验。
以上就是Angular 表单验证：移除 is-invalid 类后验证失效的解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1580324.html
微信扫一扫 
支付宝扫一扫 
