如何解决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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。