Mobile Flex4.5 FormItem errorTip未显示

Question

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

尽管我已经启用了它(请阅读下面的内容)，但errorTip并没有出现。并且它显示的错误消息被放在屏幕的顶部，而不是放在表单项中。

<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

我设法找到了我自己问题的解决方案，部分原因是我忽略了问题的重要部分。表单外观的默认布局非常糟糕，所以我分别切换到了StackedFormSkin和StackedFormItemSkin。

但是，堆叠的外观会将errorTextDisplay从窗体项移动到窗体外观。我最终需要做的是创建我自己的皮肤(c+p从各自堆叠的皮肤)。

在我的表单皮肤中，我简单地从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皮肤的优点，但这意味着您的错误消息仍然会出现在导致错误的输入旁边。

Answer 2

试一试，这应该会显示错误消息，你需要向验证器添加一个触发器，并提到它必须触发的事件。

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

出现不同类型的错误图标的原因是因为您使用了<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>