在Angular 5中结合ngClass使用Bootstrap 4成功/错误类遇问题

嘿，我来帮你搞定这个Bootstrap 4表单验证的问题！

首先得明确：Bootstrap 4确实对表单验证的类做了调整，你之前的猜测没错——旧版的has-success/has-error已经被弃用，取而代之的是is-valid/is-invalid，但这些类的用法和你之前的操作可能有出入，我给你拆解一下关键点：

1. 类的绑定位置要正确 #

is-valid和is-invalid需要直接添加到表单控件（比如<input>、<select>）上，而不是加在父容器form-group上。同时，你需要在控件的父容器里搭配valid-feedback或invalid-feedback元素，用来显示验证提示。

2. 结合Angular表单状态控制显示时机 #

在Angular响应式表单里，建议结合控件的dirty（用户已修改过）或touched（用户已点击过控件）状态来触发验证类的显示，避免页面加载时就直接显示错误提示。

给你修改后的代码示例 #

基于你的代码片段，调整后的表单控件应该是这样的：

<h1 class="page-header">Register Page</h1>
<!-- Registration Form -->
<form [formGroup]='form' (submit)='onRegisterSubmit()' novalidate>
  <div class="form-group">
    <label for="username">Username</label>
    <input 
      type="text" 
      class="form-control" 
      id="username" 
      formControlName="username"
      <!-- 绑定验证类 -->
      [class.is-valid]="form.get('username').valid && (form.get('username').dirty || form.get('username').touched)"
      [class.is-invalid]="form.get('username').invalid && (form.get('username').dirty || form.get('username').touched)"
    >
    <!-- 错误提示 -->
    <div class="invalid-feedback" *ngIf="form.get('username').invalid && (form.get('username').dirty || form.get('username').touched)">
      请输入符合要求的用户名（比如长度不少于3位）
    </div>
    <!-- 成功提示 -->
    <div class="valid-feedback" *ngIf="form.get('username').valid && (form.get('username').dirty || form.get('username').touched)">
      用户名格式正确
    </div>
  </div>

  <!-- 其他表单字段（邮箱、密码等）可以按照同样的逻辑复制修改 -->
  
  <button type="submit" class="btn btn-primary" [disabled]="form.invalid">完成注册</button>
</form>

额外注意点 #

• 表单标签上记得加novalidate，禁用浏览器默认的表单验证逻辑，完全用Angular的验证规则来控制。
• 确保你已经正确引入了Bootstrap 4的CSS文件，没有和其他版本的Bootstrap或样式库冲突。

内容的提问来源于stack exchange，提问作者Jor Khachatryan