转载自 http://www.ngui.cc/news/show-140.html
如何显示验证失败的错误信息?
在 Angular 中,我们可以通过 #userName="ngModel" 方式获取 ngModel 对象,然后通过该对象的 errors 属性,来获取对应验证规则 (如 required, minlength 等) 的验证状态。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<input
type="text"
required
minlength="3"
[(ngModel)]="username"
#userName="ngModel">
<hr>
<div *ngIf="userName.errors?.required">请您输入用户名</div>
<div *ngIf="userName.errors?.minlength">
用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为
{{userName.errors?.minlength.actualLength}}
</div>
`,
})
export class AppComponent {
username = 'semlinker';
}