javascript - Angular2: Custom validation for fields with numbers only - Stack Overflow

admin管理员组

文章数量:1406052

Im trying to do custom validation in angular 2, I have included what needed in my knowledge but Im unable to validate

import { FORM_DIRECTIVES, AbstractControl, ControlGroup
,FormBuilder,Control, Validators } from 'angular2/mon';
@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' : ['' , Validatorspose([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);

also validator function was in other file that i included but here its in class and im accessing using this.function, also how to apply appropriate twitter bootstrap

Im trying to do custom validation in angular 2, I have included what needed in my knowledge but Im unable to validate

import { FORM_DIRECTIVES, AbstractControl, ControlGroup
,FormBuilder,Control, Validators } from 'angular2/mon';
@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.pose([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);

also validator function was in other file that i included but here its in class and im accessing using this.function, also how to apply appropriate twitter bootstrap

• javascript
• twitter-bootstrap
• validation
• angular
• angular2-forms

Share Improve this question Follow asked Feb 25, 2016 at 19:29 blackHawkblackHawk 6,3271313 gold badges6464 silver badges104104 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You are using Angular2, then you can use html5 form fields. Why do not you use the '<input type ="number"/>?

I tried to reproduce it in this Plunker and validation is called fine.

I'm not sure what you expect. Currently the formValidator indicates an error when 123 is entered, everything else is considered valid ('ab', '12', 'xyz123').

If you want to indicate an error return an object with error key and an arbitrary value (for example error message).

If you want to indicate no error (value is valid) then return null.

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

Updated Plunker

本文标签： javascriptAngular2 Custom validation for fields with numbers onlyStack Overflow