2

I saw this bootstrap popover and I'am trying to use it in my project.

Consider a simple example. 

<input type="number" ng-model="data" step="0.1" />

The input field has steps of 0.1. I want the user to enter only values up to 10 and not beyond that.

If user enters anything beyond 10, I want a popover to display at the top stating that the value needs to be entered from the range 0 to 10 only.

How can I achieve this? The popover shown above does not have any example similar to the one I am looking for. Can someone shed some light?

Rodmentou
  • 1,610
  • 3
  • 21
  • 39
Ayesha
  • 835
  • 4
  • 14
  • 33
  • 1
    `max="10"` ? Then hook validation state changes to trigger popover, as `class="ng-invalid"` should be set. See docs at https://docs.angularjs.org/guide/forms section "Custom Validation" ? – Darryl Miles Nov 19 '15 at 00:13
  • 1
    See also https://docs.angularjs.org/api/ng/directive/ngChange `` to hook your jquery code to check `class="..."` contents and/or check AngularJS validation properties, to decide to popover (or remove the popover). – Darryl Miles Nov 19 '15 at 00:18

1 Answers1

4

You can adapt the programmatically triggering popups answer (or any of the directives from Good way to dynamically open / close a popover (or tooltip) using angular, based on expression? and tie it to the field validation

<form name="myForm">
  <input popover="Should be between 1 and 10" name="myInput" ng-model="test"
        popover-toggle="myForm.myInput.$error.max" max="10" type="number" 
        popover-placement="bottom" />
</form>

I've used the directive from https://stackoverflow.com/a/31372487/360067

Plnkr - http://plnkr.co/edit/2uk4YM5zinM01ayzZKdd?p=preview

Community
  • 1
  • 1
potatopeelings
  • 40,709
  • 7
  • 95
  • 119
  • @potatopeelings- one small question. can i not have it without the form ? what should be done in case i want to use it without form? – Ayesha Nov 19 '15 at 17:44
  • @potatopeelings- it only takes number as input. a rare case is that it take character 'e' too. how to exclude 'e' from being accepted ? e is the eulers number and thats y it is accepting it. how can i avoid thaT ? – Ayesha Nov 19 '15 at 18:34
  • Yeah, you can pass any expression to `popover-toggle` (like write your own expression to verify the value). The e is because its treated as an exponential number - once you take the form off, you'll have to write your own number validation and you can exclude e in addition to the invalid range values) – potatopeelings Nov 20 '15 at 03:21