Angular2：仅对带有数字的字段进行自定义验证答案

【问题标题】：Angular2: Custom validation for fields with numbers onlyAngular2：仅对带有数字的字段进行自定义验证
【发布时间】：2016-06-08 18:34:19
【问题描述】：

我正在尝试在 Angular 2 中进行自定义验证，我已经包含了我所知道的内容，但我无法验证

import { FORM_DIRECTIVES, AbstractControl, ControlGroup
,FormBuilder,Control, Validators } from 'angular2/common';
@Component({
selector : 'cusValidate',
template: `
 <form [ngFormModel] = "myform" (ngSubmit) = "onSubmit()">
 <lable>Credit Card Number</lable>
 <div>
 <input type = "text" [ngFormControl] = "inputfield"/>
 <div [class.has-error] = '!inval'>
  </div>
 </div>
 <button type = "submit">Submit</button>
 </form>
`,
directives : [FORM_DIRECTIVES]

})
export class cusValidation{
myform : ControlGroup;
inputfield : AbstractControl;

constructor(fb : FormBuilder){
   this.myform = fb.group({
        'inputfield' : ['' , Validators.compose([Validators.required
,this.formValidator])]
    })
   this.inputfield = this.myform.controls['inputfield']
}

 formValidator(val : Control) :any {
     if(val.value.match(/^123/)){
         return {inval : true};
     }
 }

onSubmit(){
    console.log('submit function called')
}
}
bootstrap(cusValidation);

验证器函数也在我包含的其他文件中，但这里它在类中，我使用 this.function 访问，以及如何应用适当的 twitter 引导程序

【问题讨论】：

标签： javascript twitter-bootstrap validation angular angular2-forms

【解决方案1】：

您正在使用 Angular2，那么您可以使用 html5 表单字段。为什么不使用'<input type ="number"/>？

【讨论】：

它仍然会在该输入字段上允许e(exponential) 字符..这又没有意义。

【解决方案2】：

我试图在这个Plunker 中重现它，并且验证被称为正常。

我不确定您的期望。目前formValidator 表示输入123 时出错，其他所有内容均视为有效（'ab'、'12'、'xyz123'）。

如果要指示错误，请返回带有错误键和任意值（例如错误消息）的对象。

如果您想指示没有错误（值有效）则返回null。

formValidator(val : Control) :any {
     if(val.value.match(/.*[^0-9].*/)){
         return {inval : true};
     }
 }

更新Plunker

【讨论】：

我希望用户不跟随只输入数字，输入字段会更改颜色以指示错误并显示消息“仅允许数字”
返回还不够吗，返回{inval : true};从内部函数
当然够了。我只是怀疑目前它没有针对您想要的情况返回，但您没有提供足够的信息让我知道您实际尝试完成什么。
那我该怎么做
我还不知道“这个”应该是什么。你想要什么？