CoreUI anguar 反应式表单验证

问题描述

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

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

this.userForm = this.fb.group({
  firstname: ['',[Validators.required,Validators.minLength(4)]],lastname: ['',Validators.required],email: ['',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>

但表单控件仍然有效！

解决方法

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

因此需要一种解决方法来转换 html5 伪类中的角度类。 此解决方案描述为 here