Question

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

即使我已启用它（如下所示），也不会出现errorTip。它显示的错误信息显示在屏幕顶部而不是在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移动到表单外观。我最终需要做的是创建我自己的皮肤（从相应的堆叠皮肤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外观的优势，但意味着您的错误消息仍将出现在导致错误的输入旁边。

Mobile Flex 4.5 FormItem errorTip未显示

3 个答案: