Search code examples
actionscript-3apache-flexflex3mxml

flex 3 number input validation on text field (restrict range to 1-100)

On an Adobe Photoshop Panel (uses Flex 3) I have several text fields that take numerical input like this:

<mx:TextInput x="90" y="10" width="50" height="20" restrict="0-9" id="myInput"/>

I have the restrict="0-9" that keeps the user from entering anything but numbers however I'd like to restrict the range to 1-100.

Should I implement that myself using a change event handler in AS3 or is there a better solution with what Flex brings with it?

I tried this: 

<fx:Declarations>
    <mx:NumberValidator source="{myInput}" property="text" integerError="Enter Integer value"
            minValue="1" maxValue="100" domain="int" 
            trigger="{myInput}" triggerEvent="change"
            invalid="myInput='50';"/>
</fx:Declarations>

but I get Error: Could not resolve <fx:Declarations> to a component implementation.

Solution

  • You can use a NumericStepper instead of a TextInput. Then you can set the minimum and maximum values.

    <s:NumericStepper id="ns" minimum="1" maximum="100" />

    Update: In Flex 3; you can use the MX Numeric Stepper with similar properties:

    <mx:NumericStepper id="ns" minimum="1" maximum="100" stepSize="1"/>