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.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.