FormItem’s in Flex have this rather annoying bug where you can not change the indicatorSkin at runtime. Peter deHaan filed a bug about this a long time ago in Adobe’s bug tracking system but unfortunately this has still not been fixed.

However, there is a workaround for this that, well.. works!

Extending the FormItem Component

By extending the FormItem component you can do a small little trick to make sure the indicatorSkin is able to change at runtime. Look at the actionscript class below.

package com.ronpasch.flex.workarounds
{
	import mx.containers.FormItem;

	public class FixedFormItem extends FormItem
	{
		public function FixedFormItem()
		{
			super();
		}

		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
			if(this.required) {
				this.required = false;
				super.updateDisplayList(unscaledWidth, unscaledHeight);
				this.required = true;
			}
			super.updateDisplayList(unscaledWidth, unscaledHeight);
		}

	}
}

As you can see, the trick lies in overriding the updateDisplayList method. If the field is currently required (which is the case if you want an indicatorSkin on your screen to begin with ), then we first set it to be no longer required and have it call the super.updateDisplayList. This will make Flex remove the indicatorSkin. Right after, we set the required field back to what it was, and if it was required then Flex will draw it again, but this time it will draw the updated indicatorSkin.

Hopefully Adobe will fix the actual FormItem class. As you can see in the comments that go along with this bug at Adobe’s bugtracking system, the fix is rather easy to implement. Too bad it’s always taking so long for some reason.