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

Question

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

在HTML5中，我将这样做：

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

在新的Angular 2 ngControl指令中，验证模式的正确属性是什么？官方的Beta API在这个问题上仍然缺乏留档。

Answer 1

您可以使用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> 

您还可以自定义无效的CSS类。

由于regex实际上没有验证器，所以您必须编写自己的验证器。它是一个简单的函数，在输入中接受一个控件，如果有效则返回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 2

自版本2.0.0-beta.8 (2016-03-02)以来，Angular现在包括一个Validators.patternregex验证器。

查看更改日志

Answer 3

现在，您不需要使用FormBuilder和所有这些复杂的组件。我在此（Angular 2.0.8-2016年3月3日）提供了更多细节：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'>

验证仅在服务器端进行。如果出现错误，则服务器返回错误代码，例如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>

如果in'capacity'为错误，则带有msg翻译的标记将可见。这种方法有以下优点：

• 这很简单

当然，如果前端需要验证，有时我会破例（例如，retypePassword注册字段永远不会发送到服务器）。