如何在Angular 2中添加表单验证模式？

Question

我有一个简单的表单,需要验证输入的开头和结尾是否不是空格.

在HTML5中,我将这样做:

<input type="text" pattern="^(?!\s|.*\s$).*$">

新Angular 2 ngControl指令中验证模式的正确属性是什么？官方Beta API仍缺乏此问题的文档.

Answer 1

现在,你不需要使用FormBuilder和所有这些复杂的valiation角度的东西.我从中提出了更多细节(Angular 2.0.8 - 3march2016):https: //github.com/angular/angular/commit/38cb526

回购示例:

<input [ngControl]="fullName" pattern="[a-zA-Z ]*">

我测试它,它的工作原理:) - 这是我的代码:

<form (ngSubmit)="onSubmit(room)" #roomForm='ngForm'  >
...
<input 
  id='room-capacity' 
  type="text" 
  class="form-control" 
  [(ngModel)]='room.capacity' 
  ngControl="capacity" 
  required
  pattern="[0-9]+" 
  #capacity='ngForm'>

替代方法(2017年6月更新)

验证仅在服务器端进行.如果出现问题,则服务器返回错误代码,例如HTTP 400,并在响应正文中跟随json对象(例如):

this.err = { 
    "capacity" : "too_small"
    "filed_name" : "error_name", 
    "field2_name" : "other_error_name",
    ... 
}

在html模板中我使用单独的标签(div/span/small等)

<input [(ngModel)]='room.capacity' ...>
<small *ngIf="err.capacity" ...>{{ translate(err.capacity) }}</small>

如果'capacity'是错误的话,那么带有msg翻译的标签将是可见的.这种方法有以下优点:

• 这很简单
• 避免前端的后端验证代码重复(对于regexp验证,这可以防止或复杂ReDoS攻击)
• 控制显示错误的方式(例如<small>标签)
• backend返回error_name,很容易在前端翻译成正确的语言

当然,如果在前端需要验证,有时我会例外(例如retypePassword,注册时的字段永远不会发送到服务器).

Answer 2

从版本2.0.0-beta.8(2016-03-02)开始,Angular现在包含一个Validators.pattern正则表达式验证器.

见CHANGELOG

Answer 3

您可以使用FormBuilder构建表单,因为它可以让您更灵活地配置表单.

export class MyComp {
  form: ControlGroup;

  constructor(@Inject()fb: FormBuilder) {  
    this.form = fb.group({  
      foo: ['', MyValidators.regex(/^(?!\s|.*\s$).*$/)]  
    });  
  }

然后在你的模板中:

<input type="text" ngControl="foo" />
<div *ngIf="!form.foo.valid">Please correct foo entry !</div> 

您还可以自定义ng-invalid CSS类.

由于实际上没有正则表达式的验证器,你必须自己编写.它是一个简单的函数,它在输入中获取一个控件,如果有效则返回null,如果无效则返回StringMap.

export class MyValidators {
  static regex(pattern: string): Function {
    return (control: Control): {[key: string]: any} => {
      return control.value.match(pattern) ? null : {pattern: true};
    };
  }
}

希望它能帮到你.

Answer 4

自定义验证一步一步

Html模板

  <form [ngFormModel]="demoForm">
  <input  
  name="NotAllowSpecialCharacters"    
  type="text"                      
  #demo="ngForm"
  [ngFormControl] ="demoForm.controls['spec']"
  >

 <div class='error' *ngIf="demo.control.touched">
   <div *ngIf="demo.control.hasError('required')"> field  is required.</div>
   <div *ngIf="demo.control.hasError('invalidChar')">Special Characters are not Allowed</div>
 </div>
  </form>

组件应用程序

import {Control, ControlGroup, FormBuilder, Validators, NgForm, NgClass} from 'angular2/common';
import {CustomValidator} from '../../yourServices/validatorService';

在类定义下

 demoForm: ControlGroup;
constructor( @Inject(FormBuilder) private Fb: FormBuilder ) {
    this.demoForm = Fb.group({
       spec: new Control('', Validators.compose([Validators.required,   CustomValidator.specialCharValidator])),
      })
}

在{ ../../yourServices/validatorService.ts }下

export class CustomValidator {
    static specialCharValidator(control: Control): { [key: string]: any } {
   if (control.value) {
       if (!control.value.match(/[-!$%^&*()_+|~=`{}\[\]:";#@'<>?,.\/]/)) {            
           return null;
       }
       else {            
           return { 'invalidChar': true };
       }
   }

 }

 }