Bind getter function to phoneNumberChanged event
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> private var _phoneNumeber:String = ""; [Bindable(event="submitClicked")] [NonCommittingChangeEvent("change")] public function get phoneNumber():String { return _phoneNumeber; } public function set phoneNumber(value:String):void { if (value.length<10) { _phoneNumeber = value; } else { _phoneNumeber = phoneFormatter.format(value); } var eventObj:Event = new Event("change"); dispatchEvent(eventObj); } private function clickHandler():void{ var eventObj:Event = new Event("submitClicked"); dispatchEvent(eventObj); } </mx:Script> <mx:PhoneFormatter id="phoneFormatter" formatString="(###) ###-####" validPatternChars="#-() "/> <mx:Panel title="Bind with Getters and Setters" width="500" height="90" layout="horizontal"> <mx:TextInput id="ti1" change="phoneNumber=ti1.text" maxChars="10" restrict="0-9"/> <mx:TextInput id="ti2" text="{this.phoneNumber}"/> <mx:Button label="Submit" click="this.clickHandler()"/> </mx:Panel> </mx:Application>