angular 表单校验显示验证失败的错误信息

转载自 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: `
    
    

    
请您输入用户名
    

      用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为
        {{userName.errors?.minlength.actualLength}}
    
  `,
}) 

export class AppComponent {
  username = 'semlinker';
}