Need help with custom form control - validation and ngModel

[eterps]

I'm trying to build a form with a signature pad as one of the items.  I'm using a jQuery plugin called HTML5 SignaturePad (http://thomasjbradley.ca/lab/signature-pad/), and have already made a custom directive for it to be inserted as a form element.  I'm able to capture the signature pad data and pass it to the controller on form submit, but I want the signature to be a required field.  The sig. pad has its own validation function which returns a boolean. I feel like I should be able to integrate that into Angular's native form validation.  The forms documentation in the Angular developer guide was helpful, but I can't get the code working correctly.

Here is a plnkr of what I'm working with thus far: http://plnkr.co/edit/C2oUXr

Any help is appreciated. Thanks!

[Peter Bacon Darwin]

Hi Eric

The biggest problem you have is that the signaturePad is not exposing some of event to tell you that it has changed so that you can tell AngularJS to update its watch.  Then try watching the api.getSignature().

Pete

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[eterps]

Yeah, a change event would be helpful.  I am watching the input field that stores the coordinate data drawn onto the canvas.  This works, because when the form is submitted, the signature data is present.  I'm not sure how to stop form submission from occurring when the signature pad validation fails.

Here's a scenario that best shows the problem...

Open the plunkr and click save.  You'll get a validation error for the first name field.

Type in something for the first name and click Save (do not draw on the pad).

The signature pad will show the validation error, but the form will submit anyway.

The recommended solution has something to do with ngModel.$parsers. This is where I am totally lost.

[Peter Bacon Darwin]

Hi Eric

Here is a version that more or less works. http://plnkr.co/edit/pPXwqI?p=preview

I hooked into the mouseup event on the canvas.  Also notice that we simply use the ngModelController to do all the work on the model rather than binding stuff to scope and to the hidden input element.

Let me know if you have any questions.

Pete

[eterps]

Excellent! Very clever use of ng-mouseup.  I was going to attempt something similar by binding to events on the hidden input form. I like your approach better as stays within the framework.

Thanks!

[pyrrhus...@gmail.com]

hi,

out of curiosity : why the use of $timeout in the updateModel function ? is the getSignature() call asynchronous ? I'm trying to use your example in a similar setup, but in my case it looks like the $timeout isn't needed...

[Peter Bacon Darwin]

When I wrote it, I think I found that the mouseup event was occuring before the sigPad plugin had extracted the drawing to the signature model.  So you were always receiving a signature that was one click behind the real one.  Putting in the timeout meant that sigPad had time to sort itself out before we try to extract the signature model. I might be wrong.

Pete

On 16 October 2012 11:17, <pyrrhus...@gmail.com> wrote:

hi,

out of curiosity : why the use of $timeout in the updateModel function ? is the getSignature() call asynchronous ? I'm trying to use your example in a similar setup, but in my case it looks like the $timeout isn't needed...

[eterps]

FYI, here is a sample project I built using the directive: http://ericterpstra.com/apps/ngSignIt/#/

And the source code: https://github.com/ericterpstra/ngSignIt

[Peter Bacon Darwin]

Cool

Pete
...from my mobile.

[ganaraj p r]

This is pretty good!!!!

Awesome work..

Regards,
Ganaraj P R

[Peter Bacon Darwin]

Hi Eric
You might like to see f you can write some tests for this app.
Also I feel uncomfortable with you having to pass a DOM Id for a button to clear the canvas. Can't you simply clear the model for the same effect?
Pete

... sent from my tablet

[eterps]

Pete, funny you should mention that. I've been looking into getting Testacular working with Yeoman on another project.  Not sure if tests will make it into the SignIt app, but definitely my next one.

And you are correct, clearing the model has the same effect as the Clear button.  I just did that to see if it worked. Curious though, would passing DOM IDs (or a class name) to the directive be considered bad practice? Why does it make you uncomfortable?

[Peter Bacon Darwin]

It is coupling you to a particular user interface choice. What if you wanted to clear the signature when the user hit the escape key or when they swipe across the screen?

Pete
...from my mobile.

[Marco Alves]

This is cool