How to add form validation pattern in Angular 2?

by

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 :

<input [ngControl]="fullName" pattern="[a-zA-Z ]*">

I test it and it works 🙂 – here is my code:

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

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

<input [(ngModel)]='room.capacity' ...>
<small *ngIf="err.capacity" ...>{{ translate(err.capacity) }}</small>

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. <small> 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).

More Related Contents:

  1. Min / Max Validator in Angular 2 Final
  2. How can I manually set an Angular form field as invalid?
  3. Angular 2 form validations start date
  4. JSF doesn’t support cross-field validation, is there a workaround?
  5. What is the maximum length of a valid email address?
  6. Disable validation of HTML5 form elements
  7. Why is client-side validation not enough?
  8. Validation Error: Value is not valid
  9. Angular how to get the multiple checkbox values?
  10. angular2 manually firing click event on particular element
  11. Is JSF validation client-side or server-side?
  12. Angular ReactiveForms: Producing an array of checkbox values?
  13. only allow children of a specific type in a react component
  14. Angular 2: Get Values of Multiple Checked Checkboxes
  15. Angular2 – FormControl Validation on blur
  16. two way binding with safe navigation operator
  17. Angular 2: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  18. How to skip validation when a specific button is clicked?
  19. Angular 2, set default value to select option
  20. Angular2 – Validate and submit form from outside
  21. Resetting a form in Angular 2 after submit
  22. Is it possible to get native element for formControl?
  23. The pipe ‘ ‘ could not be found angular2 custom pipe
  24. What’s the appropriate HTTP status code to return if a user tries logging in with an incorrect username / password, but correct format?
  25. How to handle set based consistency validation in CQRS?
  26. Why does allow blank spaces?
  27. Angular 2 Reactive Forms trigger validation on submit
  28. Keep open when validation has failed
  29. Forms In angular2
  30. Validate order of items inside ui:repeat

Leave a Comment