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' : '';
}
}
阅读 1559 · 发布于 2021-06-21
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
OpenResty lua-resty-auto-ssl 无法颁发证书问题阅读 1644
-
Spring Boot 使用 Validated group 分组校验阅读 410
-
Git 命令之本地仓库上传至远程仓库阅读 1815
-
面试题:Java 中的 == 与 equals 区别阅读 1738
-
缓存穿透、缓存雪崩、缓存击穿、缓存污染阅读 1810
-
Spring Boot2 关闭 Spring Security 权限验证阅读 12332
-
软考-系统架构设计师:性能评价方法阅读 2626
-
Java 后端面试题汇总阅读 258
-
MongoDB uri 连接规则阅读 4419
-
软考-系统架构设计师:存储管理-段页式存储组织阅读 3213