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

Answer 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:
  /^[az]*$/

• 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 (eg 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 .