Question

我在应用程序的运行时动态创建表单。我的表单项的内容（让我们称之为MyFormItemContent）看起来像这样（简化）：

<?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>

以及我们正在使用的验证器的代码。它适用于应用程序的其他部分，并且debuging显示消息存在但未显示。

/**
 * 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);
    }
}

声明表单的代码如下所示：

<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>

最后，该项目将添加到表单中：

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

如果MyValidator的验证有错误，则会按预期在BorderContainer周围出现红框。但不幸的是，应该直接表单项的错误文本不会。我认为这是一个布局问题，因为我在表单项内容中定义验证器，然后将其添加到表单中。我已经调试了这个并阅读了很多文档。

我认为如果在mxml中声明FormItem如何添加到Form中会有所帮助，但我找不到相关的信息。

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>

表单项mxml文件

<?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>

我发布此代码是为了您的兴趣。

动态添加的FormItem不显示错误文本

1 个答案: