CoreUI anguar 反应式表单验证答案

【问题标题】：CoreUI angular reactive form validationCoreUI anguar 反应式表单验证
【发布时间】：2021-03-26 14:58:03
【问题描述】：

我正在尝试使用 CoreUI（免费）和 angular 11 构建一个带有验证的表单，但我在输入组件上遇到了问题。

这是我的控制器（表单定义部分）：

this.userForm = this.fb.group({
  firstname: ['', [Validators.required, Validators.minLength(4)]],
  lastname: ['', Validators.required],
  email: ['', Validators.required],
  saleForces: []
});

这里是模板：

<form [formGroup]="userForm" class="was-validated" (ngSubmit)="formSubmit()" novalidate>
<div class="card-body">
  <div class="form-group">
    <label for="firstname">Name</label>
    <input type="text" formControlName="firstname" id="firstname" class="form-control" />
    {{ firstname.errors | json }} {{ firstname.invalid }}
    <div *ngIf="firstname.invalid"
         class="invalid-feedback">
      <div *ngIf="firstname.errors.required">
        Name is required.
      </div>
      <div *ngIf="firstname.errors.minlength">
        Name must be at least 4 characters long.
      </div>
    </div>
  </div>
</form>

但表单控件仍然有效！

【问题讨论】：

看起来一切正常。您是否在控制台日志中收到任何错误？
不，控制台日志是干净的

标签： angular validation angular-reactive-forms reactive-forms core-ui

【解决方案1】：

我发现了问题： CoreUI 中的 css 作用于 :valid 和 :invalid 伪类，仅当您使用 html5 validation methods 时才会添加这些类，但角度添加 ng-valid 和 ng-invalid 类。

所以需要一种解决方法来翻译 html5 伪类中的 angular 类。此解决方案描述为here

【讨论】：