本文旨在解决 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 属性来决定是否显示错误信息元素。
<div *ngIf="submitted && f['username'].errors" class="invalid-feedback"> Username is required </div>
在这种情况下，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.ts
import { 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!! :-)\n\n' + JSON.stringify(this.form.value, null, 4));
}
}<!-- app.component.html -->
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" formControlName="username" [ngClass]="{ 'is-invalid': submitted && f['username'].errors }">
<div *ngIf="submitted && f['username'].errors" class="invalid-feedback">
Username is required
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>在这个示例中，*ngIf 指令根据 submitted 和 f['username'].errors 的值来决定是否显示错误信息。
注意事项
总结
在 Angular 表单验证中，is-invalid 类通常用于控制错误信息的显示。但是，如果错误信息元素默认隐藏，移除 is-invalid 类后，错误信息可能无法显示。为了解决这个问题，可以移除错误信息元素的 display: none 样式，或者使用 *ngIf 指令或其他条件渲染方式来控制错误信息的显示。通过理解问题的根本原因并采取适当的解决方案，可以确保 Angular 表单验证的正确性和用户体验。
