Dynamically added FormItem doesn't show error text

Question

I am dynamically creating a form on runtime of my application. The content of my form item (lets call it MyFormItemContent) looks like this (simplified):

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   width="100%" borderAlpha="0.0">
    <fx:Declarations>
        <utils:DataItemValidator dataItem="{referenceToDataItem}"
                                 source="{this}"/>
    </fx:Declarations>

    <s:HGroup width="100%">
        <s:TextInput width="100%" text="@{bindingToText}"/>
        <s:CheckBox width="14" selected="{refToBoolean}"/>
    </s:HGroup>
</s:BorderContainer>

and the the code for the the validator we are using. It works fine other parts of the application and debuging shows that a message exists but is not shown.

/**
 * This class effectively does *not* validate the given 'value', but just returns
 * his 'dataItem's attached messages.
 */
public class DataItemValidator extends Validator {

    private var _dataItem:StatefulDataItem;

    public function get dataItem():StatefulDataItem {
        return _dataItem;
    }

    public function set dataItem(dataItem:StatefulDataItem):void {
        _dataItem = dataItem;
        ChangeWatcher.watch(_dataItem, "messages", function():void {
            validate();
        }, false);

        validate();
    }

    override protected function doValidation(value:Object):Array {
        if (!isInitialized()) return [];

        // Clear results Array.
        var results:Array = [];
        // If dataItem has error indicator append all messages to result array.
        if (dataItem && dataItem.messages) {
            for each (var message:ResultMessage in dataItem.messages) {
                results.push(new ValidationResult(message.isErroneous(), null, "", message.text));
            }
        }
        return results;
    }

    public function isErroneous():Boolean {
        if (!dataItem) return false;
        return dataItem.isErroneous();
    }

    private function isInitialized():Boolean {
        return (dataItem != null);
    }
}

The code that declares the form looks like this:

<s:Form id="myForm" width="100%" height="100%">
    <s:layout>
        <s:FormLayout gap="-7" paddingBottom="2" paddingLeft="2" paddingRight="2"
                      paddingTop="2"/>
    </s:layout>
</s:Form>

And finally, the item is added to the form like this:

var formItem:FormItem = new FormItem();
formItem.label = "some text";
formItem.addElement(new MyFormItemContent());
myForm.addElement(formItem);

If the validation of MyValidator has errors a red frame apears around the BorderContainer as intended. But unfortunatly the error text that should apear right to the form item doesn't. I'm thinkin it's a layout problem because I define the validator inside the form item content before adding it to the form. I've already debugged this and read documentations a lot.

I thought it would help to know how a FormItem is added to a Form if you declare it in mxml but I couldn't find information on that either.

Answer 1

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="application2_creationCompleteHandler(event)" xmlns:local="*">

    <fx:Script>
        <![CDATA[
            import mx.charts.series.ColumnSeries;
            import mx.collections.ArrayCollection;
            import mx.containers.FormItem;
            import mx.events.FlexEvent;



            protected function application2_creationCompleteHandler(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
                for(var i:int = 0; i < 4; i++)
                {
                    var formItem:FormItem = new FormItem();
                    formItem.label = "some text";
                    formItem.addElement(new MyFormItemContent());
                    myForm.addElement(formItem);
                }
            }

        ]]>
    </fx:Script>


    <s:Form id="myForm" width="100%" height="100%">
        <s:layout>
            <s:FormLayout gap="-7" paddingBottom="2" paddingLeft="2" paddingRight="2"
                          paddingTop="2"/>
        </s:layout>
    </s:Form>


</s:Application>

form item mxml file

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   width="100%" borderAlpha="0.0" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="bordercontainer1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.events.ValidationResultEvent;

            [Bindable]
            private var bindingToText:String;

            [Bindable]
            private var refToBoolean:Boolean;

            protected function bordercontainer1_creationCompleteHandler(event:FlexEvent):void
            {
                // TODO Auto-generated method stub

            }

            protected function txt_focusOutHandler(event:FocusEvent):void
            {
                var obj:ValidationResultEvent = validator.validate(txt.text);
                error.visible = !(obj.type == "valid");
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <mx:PhoneNumberValidator id="validator"/>
    </fx:Declarations>

    <s:HGroup width="100%">
        <s:TextInput id="txt" width="100%" text="@{bindingToText}" focusOut="txt_focusOutHandler(event)"/>
        <s:CheckBox width="14" selected="{refToBoolean}"/>
        <s:Label id="error" visible="false" backgroundColor="red" text="This Field Required"/>
    </s:HGroup>
</s:BorderContainer>

I am posting this code for your interest.