Mobile Flex 4.5 FormItem 错误提示未显示

Question

我目前正在尝试使用 numbervalidator 来验证我的几个使用十进制值的字段。我希望它显示 mx 示例的显示方式，例如http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/validators/NumberValidator.html#includeExamplesSummary

即使我已启用它（请阅读下文），错误提示也不会出现。而且它确实显示的错误消息被放置在屏幕顶部而不是在formitem中。

<s:NumberValidator id="nv1" allowNegative="false" source="{field1}" property="text" fractionalDigits="3"  />
<s:NumberValidator id="nv2" allowNegative="false" source="{field2}" property="text" fractionalDigits="3"  />

我阅读了一个建议来覆盖 formitem 皮肤并将 showErrorTip 设置为 true（在 contentGroup 上），但这没有任何影响。我还删除了 errorTextDisplay 以尝试阻止出现的其他错误消息，但这也没有影响。

如果我能让现有的错误消息出现在 formItem（下方）中，我会很高兴的。我在下面包含了我的视图的基本结构：

<s:Scroller width="100%" height="100%">
    <s:Group>
        <s:Form id="myForm" width="100%">
            <s:layout>
                <s:FormLayout gap="0"/>
            </s:layout>
            <s:HGroup width="100%">
                <s:FormItem label="Field1" width="50%">
                    <s:TextInput id="field1" width="100%" text="{data.field1}" restrict="0-9." />
                </s:FormItem>
                <s:FormItem label="Field2" width="50%">
                    <s:TextInput id="field2" width="100%" text="{data.field2}" restrict="0-9." />
                </s:FormItem>
            </s:HGroup>
        </s:Form>
    </s:Group>
</s:Scroller>

这是一个很长的表单（我省略了其他字段），这就是我使用滚动条并以两列布局显示输入的原因。

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

    <fx:Declarations>
        <s:NumberValidator id="nv1" allowNegative="false" source="{field1}" property="text" fractionalDigits="3"  
                           trigger="{validate}" triggerEvent="click" requiredFieldError="No use"/>
        <s:NumberValidator id="nv2" allowNegative="false" source="{field2}" property="text" fractionalDigits="3" 
                           trigger="{validate}" triggerEvent="click" requiredFieldError="No use"/>
    </fx:Declarations>


    <s:Scroller width="100%" height="100%">
        <s:Group>
            <s:Form id="myForm" width="100%">
                <s:layout>
                    <s:FormLayout gap="0"/>
                </s:layout>
                <s:VGroup width="100%">
                    <s:FormItem label="Field1" width="50%">
                        <s:TextInput id="field1" width="100%" text="11" restrict="0-9." />
                    </s:FormItem>
                    <s:FormItem label="Field2" width="50%">
                        <s:TextInput id="field2" width="100%" text="22" restrict="0-9." />
                    </s:FormItem>
                </s:VGroup>
                <s:Button id="validate" label="Validate"/>
            </s:Form>
        </s:Group>
    </s:Scroller>
</s:Application>

Answer 2

您使用图标出现不同类型错误的原因是因为您使用了<s:Form> 和<s:FormItem>，将其更改为<mx:Form> 和<mx:FormItem> 时，您将得到旧类型的错误工具提示上突出显示的框和错误。试试下面的示例。

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

    <fx:Declarations>
        <s:NumberValidator id="nv1" allowNegative="false" source="{field1}" property="text" fractionalDigits="3"  />
        <s:NumberValidator id="nv2" allowNegative="false" source="{field2}" property="text" fractionalDigits="3"  />
    </fx:Declarations>


    <s:Scroller width="100%" height="100%">
        <s:Group>
            <mx:Form id="myForm" width="100%">
                <s:HGroup width="100%">
                    <mx:FormItem label="Field1" width="50%">
                        <s:TextInput id="field1" width="100%" text="1" restrict="0-9." />
                    </mx:FormItem>
                    <mx:FormItem label="Field2" width="50%">
                        <s:TextInput id="field2" width="100%" text="2" restrict="0-9." />
                    </mx:FormItem>
                </s:HGroup>
            </mx:Form>
        </s:Group>
    </s:Scroller>
</s:Application>

Answer 3

我设法找到了我自己的问题的解决方案，部分原因是我忘记提及原来是问题的重要部分。表单皮肤的默认布局非常糟糕，所以我分别切换到 StackedFormSkin 和 StackedFormItemSkin。

但是，Stacked 皮肤将 errorTextDisplay 从 formitem 移动到 form 皮肤。我最终需要做的是创建自己的皮肤（从各自堆叠的皮肤中 c+p'd）。

在我的表单皮肤中，我只是从 FormSkin 中删除了 errorTextDisplay 元素，并从原始 FormItemSkin 中复制了 errorTextDisplay，并进行了一些更改（如下所示）以使其显示在文本输入下方。

<s:RichText id="errorTextDisplay" includeIn="errorStates"
            fontStyle="italic" fontWeight="normal" color="0xFE0000"
            left="contentCol:0" right="helpCol:10"
            bottom="row3:10" baseline="row3:0" 
            maxDisplayedLines="-1"/>

您需要将 row3 添加为额外的 ConstraintRow。

基本上，上述更改将获得 StackedForm 外观的优势，但意味着您的错误消息仍会出现在导致错误的输入旁边。