Skip to content
This repository has been archived by the owner on Jul 1, 2020. It is now read-only.

Auto validate when control binding ng-disable #53

Closed
dungvu-equix opened this issue Jul 23, 2015 · 10 comments
Closed

Auto validate when control binding ng-disable #53

dungvu-equix opened this issue Jul 23, 2015 · 10 comments

Comments

@dungvu-equix
Copy link

If input controls is required and binding ng-disable=false, then in the startup time, it shows ng-invalid (red border). Could you check for this case?

@ghiscoding
Copy link
Owner

Your question is a bit short and possibly missing some details, but having an input that is not disabled and is required is perfectly correct to be invalid. Unless I didn't understand your question...which is possible because I don't even know what is the startup time. It might help if you do a plunker.

@ghiscoding
Copy link
Owner

The problem you had, if I now understood correctly, might be related to issue #52 (please read until the end, since your problem is similar to what is discussed further down that issue)

@dungvu-equix
Copy link
Author

Sorry my bad English,

Here my plunker: http://plnkr.co/edit/5egsZkBR4bg5hg8Wb5em?p=info

  1. When start up, input control with ng-disabled always call validate.
  2. When I show or not my Note fields via click checkbox => button validate
    all control not show (via binding tag: ng-if, ng-show, ng-disabled)

Dung Vu | Developer | Amigo Quant Edge JSC

mobile: +849 0896 6639 <//mobile:%20+849%200896%206639>
email: [email protected]
skype: dung.vt

Amigo Quant Edge JSC
Suite #503, IPH Building
241 Xuan Thuy Street, Cau Giay Dist
Hanoi, Vietnam

tel: +84 (4) 7300 8999 <//tel:%20+84%20(4)%207300%208999>
fax: +84 (4) 7300 3999 <//fax:%20+84%20(4)%207300%203999>

web: www.quant-edge.com

This message (including attachments, if any) is confidential, may be
privileged and is intended for the above-named recipient(s) only. If you
have received this message in error, please notify me by return email and
delete this message from your system. Any unauthorized use or disclosure of
this message is strictly prohibited.

Amigo Quant Edge JSC assumes no responsibility for errors, inaccuracies or
omissions in these materials, and does not warrant the accuracy or
completeness of the information contained within these materials. Amigo
Quant Edge JSC shall not be liable for any special, indirect, incidental,
or consequential damages, including without limitation losses, lost
revenues, or lost profits that may result from these materials.

On Fri, Jul 24, 2015 at 6:54 AM, Ghislain B. [email protected]
wrote:

The problem you had, if I now understood correctly might be related to
issue #52 #52
(please read until the end, since your problem is similar to what is
discussed further down that issue)


Reply to this email directly or view it on GitHub
#53 (comment)
.

@ghiscoding
Copy link
Owner

Yes ok I see it better now with the plunker, nice demo by the way thanks.
This is related to the issue found by the other guy. What happen is that I watch for ngDisabled, I then $touched the input which makes the red border to show up, and the fact that you write ng-disable="false" count as a watch which is why the red border shows up but not the text.

It should be fixed in coming version, I will not $touched the field in the future. The validation will still pre-validate in the background, but field will stay $pristine, so no border will show.

Oh but I just saw your "OK ???" after clicking the submit button, that seems to be a problem, I will look into that too

@ghiscoding
Copy link
Owner

I got your plunker to work, it is no more showing the "OK ???", you forgot couple of things which made the tool not to work.

When you use AngularTranslate, you also need to add AngularTranslate Loader Static File since I use it for loading the JSON locale files

  <script src="https://rawgit.com/ghiscoding/angular-validation/master/vendors/angular-translate/angular-translate.min.js"></script>
  <script src="https://rawgit.com/ghiscoding/angular-validation/master/vendors/angular-translate/angular-translate-loader-static-files.min.js"></script>

and you also forgot to configure AngularTranslate

myApp.config(['$translateProvider', function ($translateProvider) {
      $translateProvider.useStaticFilesLoader({
        prefix: 'https://rawgit.com/ghiscoding/angular-validation/master/locales/validation/',
        suffix: '.json'
        });

    // load English ('en') table on startup
        $translateProvider.preferredLanguage('en').fallbackLanguage('en');
    }]);

BUT there is something incorrect in your code, when you use ngIf or ngShow, it will not remove the validation from the hidden field. The hidden field will still be invalid (if required). What you have to do is to use the ngDisabled on each of the inputs that you want to hide (make it the inverse (!) of your ngShow), like this:

<div class="row" ng-show="ModelData.IsShowNote">
     <label class="col-xs-4 control-label">Note 2</label>
     <div class="col-xs-6">
         <textarea class="form-control" ng-model="ModelData.Note2" name="ModelData_Note2" ng-disabled="!ModelData.IsShowNote" validation="required"></textarea>
      </div>
</div>

@dungvu-equix
Copy link
Author

And, if we have a lot of controls in block div, and we must remove all of them in GUI via ng-if or ng-show, as you comment in code I must set ng-disabled for each input in this block, right?

@ghiscoding
Copy link
Owner

I was looking at your code and I found out something that I did not know before, the ngIf creates a new scope as it says in the AngularJS Documentation of ngIf and if you use that inside your form, it's causing a lot of problem for my library. I don't know how to watch the parent for a change, when you use ngIf, my library doesn't know you removed an element, it doesn't get triggered.

I really don't know how to watch or trigger an ngIf and it's causing lot of problems with my library.

At this moment, Angular-Validation library does not support ngIf, please use ngShow and add an ngDisabled on all your inputs.

@dungvu-equix
Copy link
Author

Ok, I will check in next week, thank you.

ghiscoding added a commit that referenced this issue Jul 29, 2015
- Fixed issue #52, Changed default behavior of `ngDisabled` which was
displaying error message right after an element became enabled, it will
still pre-validate but not directly show the error message unless
`preValidateFormElements` is set to True.
- Look into the folder /more-examples/interpolate/
- Fixed issue #53,  To support `ngIf` (add a trigger on element
`$destroy`).
- Look into the folder /more-examples/ngIfShowHideDisabled/
@ghiscoding
Copy link
Owner

I found a way to trigger a $destroy on an input element and I am now happy to say that:
Angular-Validation library does not now support ngIf correctly :)
If you use the ngIf, there is no need to use ngDisabled anymore, but if you use ngShow, then you still need to use ngDisabled with it.

You can find a demo under the folder angular-validation/more-examples/ngIfShowHideDisabled which is based on the plunker demo you did.
I also fixed your plunker if you want to see it there.

And finally, I also fixed the red border that was showing at the beginning.

So please use the new version v.1.3.38

Thank you for the great feedback!

@dungvu-equix
Copy link
Author

Many thank you, greate support :)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants