search

johannesjo / ng-fab-form

Convenient forms for Angular with no extra markup? Fabulous!
https://johannesjo.github.io/ng-fab-form
MIT License
172 stars 25 forks source link

Validate on blur (and maybe using ng-model-options?) #55

Closed mdelgadov closed 9 years ago

mdelgadov commented 9 years ago

First of all, thanks for your great tool.

My issue is that the fields validate immediately, an option to debounce or validate on blur would be helpful.

I tried to use ng-model-options="{ updateOn: blur }" but didn't work.

This is particularly problematic when async validating at "register user" time, when I need to go to the server to make sure the user doesn't exist.

The program then issues several http requests all of them returning inexistent user (since it's an incomplete email address) and the last potentially saying that the user already exist.

I would love to create a pull request since I'd rather collaborate instead of nag, but my experience in JS and angular aren't enough. Thanks in advance.

Miguel Delgado

johannesjo commented 9 years ago

Hello there! Thanks for reporting your issue.

I haven't thought about a solution which uses ng-model-options yet. If you have an idea, I'm all ears. For now you can change the validation template from:

 <ul class="list-unstyled validation-errors"
        ng-show="field.$invalid && (field.$touched || field.$dirty || form.$triedSubmit)">

to

 <ul class="list-unstyled validation-errors"
        ng-show="field.$invalid && (field.$touched || form.$triedSubmit)">

When it comes to async validators I'm not sure though. Actually I think, that this issue might be more of an issue with the underlying ng-messages. What would be super-helpful though, would be another form on the example-page, which uses a fake-async-validator. To be honest, I just wrote a test-case for async validators, but I haven't tested them out in a real browser with ng-fab-form.

Another super-helpful thing would be some sort of show-case for all those functionalities which can be achieved by just editing the validations-template. This is all basic angular form stuff, but I think many people are not aware about how most of it works.

You don't have to provide a pull request of course. Having feedback about how people use the module and in what problems they run into is really valuable knowledge to me. But let me say that you don't have to be shy. You can't break anything and PRs are a great way to get a code review ;)

johannesjo commented 9 years ago

Well the issue is not with ng-fab-form as it works fine. You need to make sure that your 'blur' is an actual string-reference, e.g.:

 <form name="formname">
    <input type="text"
           required
           ng-model="testBlur"
           ng-model-options="{updateOn:'blur'}">
</form>

Which works as expected.