AngularJS hide div using ng-show on ng-click

Question

My goal is to get rid of the error messages with a button click. So I thought I'd just clear the field on button click and hence, get ride of the error. It worked in my very first test.

<div class="errorPopup" 
data-ng-click="runner.Name = null" 
data-ng-show="mainForm.name.$error.pattern">
      <div class="triangle-down pull-left"></div>
      <span>Only letters allowed.</span>
</div>
<input ng-model="runner.Name" data-ng-patter="/(a-z)\" required />

But now I have to click once.. clearing the field. then click twice before the error div is deleted.

I'd like to get rid of the field and the div in one click

I don't think you've given us enough information to help you. It is not obvious to me what mainForm.name is; nor when it would change. Can you put together a plunker to show the problem? If I had to guess; you need to force a $digest.$apply() on the first click. — JeffryHouser
– JeffryHouser, Commented Aug 4, 2014 at 11:37
Don't try your code sample, but wouldn't it be easier using ng-pattern and not ng-patter? — Nico
– Nico, Commented Aug 4, 2014 at 11:45

gkalpak · Accepted Answer · 2014-08-04 12:28:02Z

1

There are a few issues with your code (assumign that there is a wrapping form with the name mainForm):

data-ng-patter should be data-ng-pattern
The regular expressions is not correct. If you want to only allow lowercase latin letters:
/^[a-z]*$/
In order to check for an error in the input field (and reference it via mainForm.name.$error) the field must have a name. Since you are referring to it as mainForm.name it needs a name of name (which is not intuitive). Choose something representative (e.g. runnerName) and use it like this:

<input type="text" name="runnerName" ... />

<div ... ng-show="mainForm.runnerName.$error">

If you fix those issues, every seems to work fine !

See, also, this short demo.

answered Aug 4, 2014 at 12:28

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS hide div using ng-show on ng-click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related