動態添加FormItem不顯示錯誤文本

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> 

，爲我們使用驗證程序的代碼。它可以很好地運行應用程序的其他部分，並且調試顯示消息存在但未顯示。

/** 
* 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周圍出現紅框。但不幸的是，應該對形式項目的錯誤文本不適用。我想這是一個佈局問題，因爲我在將表單項內容添加到表單之前定義了驗證器。我已經調試過這個並閱讀了很多文檔。

我認爲這將有助於瞭解如何將FormItem添加到窗體中，如果您在mxml中聲明該窗體，但是我無法找到該信息。

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> 

我張貼您的關注這個代碼。