40

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

在 HTML5 中，我会这样做：

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

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

4

6 回答 6

49

现在，您不需要使用FormBuilder所有这些复杂的验证角度的东西。我从这个（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>

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

  • 这很简单
  • 避免前端的后端验证代码重复（对于正则表达式验证，这可以防止 ReDoS 攻击或使ReDoS攻击复杂化）
  • 控制显示错误的方式（例如<small>标签）
  • 后端返回错误名称，很容易在前端翻译成正确的语言

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

于 2016-03-10T19:05:59.057 回答
11

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

查看变更日志

于 2016-03-04T21:51:27.617 回答
9

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

希望对您有所帮助。

于 2016-01-31T00:03:42.293 回答
5

一步一步自定义验证

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>

组件应用程序.ts

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 };
       }
   }

 }

 }
于 2016-06-21T07:09:34.560 回答
1

我使用 Angular 4.0.1 的解决方案：仅显示所需 CVC 输入的 UI - 其中 CVC 必须正好是 3 位数字：

    <form #paymentCardForm="ngForm">         
...
        <md-input-container align="start">
            <input #cvc2="ngModel" mdInput type="text" id="cvc2" name="cvc2" minlength="3" maxlength="3" placeholder="CVC" [(ngModel)]="paymentCard.cvc2" [disabled]="isBusy" pattern="\d{3}" required />
            <md-hint *ngIf="cvc2.errors && (cvc2.touched || submitted)" class="validation-result">
                <span [hidden]="!cvc2.errors.required && cvc2.dirty">
                    CVC is required.
                </span>
                <span [hidden]="!cvc2.errors.minlength && !cvc2.errors.maxlength && !cvc2.errors.pattern">
                    CVC must be 3 numbers.
                </span>
            </md-hint>
        </md-input-container>
...
<button type="submit" md-raised-button color="primary" (click)="confirm($event, paymentCardForm.value)" [disabled]="isBusy || !paymentCardForm.valid">Confirm</button>
</form>
于 2017-04-10T02:42:32.597 回答
0

无需制作验证模式，您可以使用这些模块轻松修剪开始和结束空格。试试这个。

https://www.npmjs.com/package/ngx-trim-directive https://www.npmjs.com/package/ng2-trim-directive

谢谢你。

于 2019-04-12T05:22:26.797 回答