Angular Material mat-error 组件输入时不校验解决方法
Angular 大约 1241 字场景
在input
第一次输入时,mat-error
没有根据FormControl
显示错误信息。
原因
mat-error
在input
第一次输入时当input
失去焦点时才显示错误信息。
解决方法
想要在input
第一次输入时就可以显示校验结果,可以添加FormControl。markAsTouched()
。
示例代码
<div>
<mat-form-field appearance="fill">
<mat-label>Enter your username</mat-label>
<input matInput placeholder="username placeholder" [(formControl)]="usernameFormControl" (change)="onUsernameChange()" >
<mat-error *ngIf="usernameFormControl.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
</div>
import {Component, OnInit} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';
@Component({
selector: 'app-username',
templateUrl: './username.component.html',
styleUrls: ['./username.component.scss'],
})
export class UsernameComponent implements OnInit {
public usernameFormControl: FormControl;
constructor() {}
ngOnInit(): void {
this.usernameFormControl = new FormControl('', Validators.maxLength(16));
this.usernameFormControl.markAsTouched();
}
onUsernameChange() {
console.log('onUsernameChange')
}
getErrorMessage() {
return this.usernameFormControl.hasError('maxlength') ? 'username length is 16' : '';
}
}
阅读 887 · 发布于 2021-06-21
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
PostgreSQL update from 根据 A 表更新 B 表阅读 1462
-
k6 压测 HTTPS 接口报 X509 certificate signed by unknown authority阅读 562
-
Arthas 监控安装成 Windows 服务的 Tomcat阅读 905
-
软考-系统架构设计师:局部性原理阅读 1369
-
Kubernetes Pod 控制器 DaemonSet阅读 216
-
npm install --save 和 --save-dev 的区别阅读 564
-
软考-系统架构设计师:系统性能设计-性能指标阅读 1122
-
Android 每隔一分钟发出时间更新广播阅读 3900
-
JMeter 使用 Loop Controller 进行循环请求阅读 878
-
JMeter 记录 Cookie 保持登录状态阅读 1035