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

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

在HTML5中，我将这样做：

---

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

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

---

希望它能帮助您。

自版本2.0.0-beta.8（2016-03-02）以来，Angular现在包括一个正则表达式验证程序

---

现在就看

吧，你不需要使用

FormBuilder

和所有这些复杂的东西。我在此（Angular 2.0.8-2016年3月3日）提供了更多细节：

回购的例子：

我测试了它，它工作了：）-这是我的代码：

...

替代方法（2017年6月更新） 验证仅在服务器端进行。如果出现错误，则服务器返回错误代码，例如响应体中的json对象（例如）：

this.err={
“容量”：“太小”
“文件名”：“错误名”，
“字段2\u名称”：“其他\u错误\u名称”，
... 
}

在html模板中，我使用单独的标记（div/span/small等）

{{翻译（错误容量）}

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

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

当然，如果前端需要验证，有时我会破例（例如，

retypePassword

注册字段永远不会发送到服务器）

逐步定制验证

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>

下课 定义

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

 }

 }

导出类CustomValidator{
静态特殊共享验证器（控件：控件）：{[key:string]：any}{
if（控制值）{
如果（！control.value.match（/[-！$%^&*（）|+| ~=`{}\[\]：“；#@'？，.\/]/）{
返回null；
}
否则{
返回{'invalidChar'：true}；
}
}
}
}

我的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>

...
CVC是必需的。
CVC必须是3个数字。
...
证实

如果不使用make验证模式，您可以使用这些模块轻松地修剪开始和结束空间。试试这个

---

谢谢。

目前还没有直接的方法。你可以编写你自己的自定义验证程序，直到它实现。下面是一个例子，说明如果你沿着这条路走下去，如何进行自定义验证伟大的答案-你拯救了五一节！：）你能帮我解决这个问题吗@chrisnowdeni只是检查（和测试）Chris Snowden在之前的回答中提到changelog。他给出了主要提示。将模式转换为这种新类型的公式是什么？例如：ng pattern=“/^（\+\91{1,2}）\d{10}$/“@VahidAlimohamadi我不明白这个问题，你能用其他的话重复一下吗？@VahidAlimohamadi在开始时删除“/”，并在结束时删除你的regexp。所以在您的例子中应该是这样的：pattern=“^（+\91{1,2}）\d{10}$”（可能您还必须删除或更改regexp中的反斜杠“\”）@zennin您可以尝试这个（但我不检查它）：Angular2有自己的模式验证器。资料来源：准确。但一年前，当响应为writern时，情况并非如此。事实上，对于这两种情况，如果允许在值的内部（中间）留有空间，trim=“blur”将起作用。

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

 }

 }

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