How to add form validation pattern in Angular 2

Question

I have a simple form that needs to validate if the beginning and the end of the input is not space   In HTML5  I will do this    lt input type  text  pattern       s    s       gt    What is the right property for validation pattern in the new Angular 2 ngControl directive  The official Beta API is still lacking documentation on this issue

User · Answer

You could build your form using FormBuilder as it let you more flexible way to configure form.

export class MyComp {
  form: ControlGroup;

  constructor(@Inject()fb: FormBuilder) {  
    this.form = fb.group({  
      foo: ['', MyValidators.regex(/^(?!\s|.*\s$).*$/)]  
    });  
  }

Then in your template :

<input type="text" ngControl="foo" />
<div *ngIf="!form.foo.valid">Please correct foo entry !</div>

You can also customize ng-invalid CSS class.

As there is actually no validators for regex, you have to write your own. It is a simple function that takes a control in input, and return null if valid or a StringMap if invalid.

export class MyValidators {
  static regex(pattern: string): Function {
    return (control: Control): {[key: string]: any} => {
      return control.value.match(pattern) ? null : {pattern: true};
    };
  }
}

Hope that it help you.

User · Answer

My solution with Angular 4 0 1  Just showing the UI for required CVC input - where the CVC must be exactly 3 digits        lt form  paymentCardForm  ngForm  gt                        lt md-input-container align  start  gt               lt 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   gt               lt md-hint  ngIf  cvc2 errors  amp  amp   cvc2 touched    submitted   class  validation-result  gt                   lt span  hidden    cvc2 errors required  amp  amp  cvc2 dirty  gt                      CVC is required                   lt  span gt                   lt span  hidden    cvc2 errors minlength  amp  amp   cvc2 errors maxlength  amp  amp   cvc2 errors pattern  gt                      CVC must be 3 numbers                   lt  span gt               lt  md-hint gt           lt  md-input-container gt       lt button type  submit  md-raised-button color  primary   click   confirm  event  paymentCardForm value    disabled   isBusy     paymentCardForm valid  gt Confirm lt  button gt   lt  form gt

User · Answer

custom validation step by step   Html template      lt form  ngFormModel   demoForm  gt     lt input     name  NotAllowSpecialCharacters        type  text                           demo  ngForm     ngFormControl    demoForm controls  spec       gt     lt div class  error   ngIf  demo control touched  gt      lt div  ngIf  demo control hasError  required    gt  field  is required  lt  div gt      lt div  ngIf  demo control hasError  invalidChar    gt Special Characters are not Allowed lt  div gt    lt  div gt     lt  form gt    Component App ts  import  Control  ControlGroup  FormBuilder  Validators  NgForm  NgClass  from  angular2 common   import  CustomValidator  from        yourServices validatorService     under class  define     demoForm  ControlGroup  constructor   Inject FormBuilder  private Fb  FormBuilder         this demoForm   Fb group          spec  new Control     Validators compose  Validators required    CustomValidator specialCharValidator                  under        yourServices validatorService ts   export class CustomValidator       static specialCharValidator control  Control      key  string   any        if  control value           if   control value match   -     amp                       lt  gt                                    return null                  else                          return    invalidChar   true

User · Answer

Since version 2 0 0-beta 8  2016-03-02   Angular now includes a Validators pattern regex validator   See the CHANGELOG

User · Answer

Without make validation patterns  You can easily trim begin and end spaces using these modules Try this   https   www npmjs com package ngx-trim-directive https   www npmjs com package ng2-trim-directive  Thank you

User · Answer

Now  you don t need to use FormBuilder and all this complicated valiation angular stuff  I put more details from this  Angular 2 0 8 - 3march2016   https   github com angular angular commit 38cb526  Example from repo     lt input  ngControl   fullName  pattern   a-zA-Z     gt    I test it and it works    - here is my code    lt form  ngSubmit   onSubmit room    roomForm  ngForm    gt       lt input    id  room-capacity     type  text     class  form-control       ngModel    room capacity     ngControl  capacity     required   pattern   0-9        capacity  ngForm  gt    Alternative approach  UPDATE June 2017   Validation is ONLY on server side  If something is wrong then server return error code e g HTTP 400 and following json object in response body  as example     this err           capacity     too small       filed name     error name         field2 name     other error name                In html template I use separate tag  div span small etc     lt input   ngModel    room capacity      gt   lt small  ngIf  err capacity      gt    translate err capacity     lt  small gt    If in  capacity  is error then  tag with msg translation will be visible  This approach have following advantages    it is very simple avoid backend validation code duplication on frontend  for regexp validation this can either prevent or complicate ReDoS attacks  control on way the error is shown  e g   lt small gt  tag  backend return error name which is easy to translate to proper language in frontend   Of course sometimes I make exception if validation is needed on frontend side  e g  retypePassword field on registration is never send to server

[validation] How to add form validation pattern in Angular 2?

Examples related to validation

Examples related to angular

Examples related to angular2-forms