angular 表单条件添加简单的验证功能

转载自 http://www.ngui.cc/news/show-139.html

如何为表单控件添加验证功能？

目前 Angular 支持的内建 validators 如下：

• required - 设置表单控件值是非空的

• email - 设置表单控件值的格式是 email

• minlength - 设置表单控件值的最小长度

• maxlength - 设置表单控件值的最大长度

• pattern - 设置表单控件的值需匹配 pattern 对应的模式

接下来我们来添加最简单的 必填 校验。

import { Component } from '@angular/core'; 

@Component({
  selector: 'app-root',
  template: `
    <input 
     type="text" 
     required
     [(ngModel)]="username">
    {{username}}
  `,
}) 

export class AppComponent {
  username = 'semlinker';
}

如何判断表单控件是否通过验证？

在 Angular 中，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，然后通过 userName.valid 判断表单控件是否通过验证。

import { Component } from '@angular/core'; 

@Component({
  selector: 'app-root',
  template: `
    <input 
     type="text" 
     required
     [(ngModel)]="username"
     #userName="ngModel">
    {{userName.valid}}
  `, }) 

export class AppComponent {
  username = 'semlinker';
}