Save 3 days of your dev life — Date picker — Multi Field Validation — Angular.js $validators (working solution)


Date Picker — If all you want is to add date picker to your app — get it here ☺

http://www.evernote.com/shard/s93/sh/72442760-1b59-42bc-9423-8a6579bb0988/90c756c11a406419346fbc5b795ee9a9

Invalid State — Multi-field

https://www.evernote.com/shard/s93/sh/f83f1356-9bbd-45cd-8d9d-4a1a4f18a800/2bc20c5992d041a806c41316569e3990

Valid State — Multi-field

https://www.evernote.com/shard/s93/sh/36151b70-b6b8-499f-9b70-0dd88544a6d7/ff1255995739768d12042aec6defad6c

Working Date picker here — Plunker

The Problem

  1. You DO NOT want to use a regular date-picker — example
  2. You want to roll your own ☺
  3. You have fields that depend on other fields to be valid (multi-field)
  4. You want to save you ngModel — since $validators fails — ngModel becomes undefined https://github.com/angular/angular.js/issues/1412

The Solution for undefined ngModel

See links below — and read them first

Explanation: Once the $validators pipeline fires — the ngModel = undefined, by design — see https://github.com/angular/angular.js/issues/1412

So what can I do:

  1. Force values using JQuery — Nathan posted here
  2. Use $formatters & $pharsers directive — by andrezero
  3. Our method: Pass values back to scope once before $validators pipeline fires

Libraries used

http://momentjs.com/, https://angularjs.org, https://docs.angularjs.org/api/ngMessages/directive/ngMessages

Solution

Working Plunker

If this was helpful, leave a comment and I will create a quick video and walk you through the solution. Otherwise, best have fun with multi-validation. I also heard that https://github.com/formly-js/angular-formly is cool — so check it out, it may solve this problem nicely.