红色和蓝色的问题都带有验证器和textinput的errorString

Question

我在使用flex和验证器时遇到了一个奇怪的问题。

以下是代码：

TestMain.xml

<?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:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.validators.StringValidator;

        import utils.ValidableProperty;

        [Bindable] public var nameID:ValidableProperty;

        public function start():void {
            var nameIDValidator:StringValidator = new StringValidator();
            nameIDValidator.required = true;
            nameIDValidator.maxLength = 35;
            nameID = new ValidableProperty(nameIDValidator);
            nameID.validate();
        }
    ]]>
</fx:Script>

<s:applicationComplete>
    start();
</s:applicationComplete>

<s:minHeight>600</s:minHeight>
<s:minWidth>955</s:minWidth>

<mx:Form color="0x323232" paddingTop="0">
    <s:Label text="See strange behavior of errorString during validator operation with validate."/>
    <mx:FormItem label="Name">
        <mx:TextInput id="nameInput" width="300" errorString="@{nameID.errorMessage}" text="@{nameID.value}"/>
    </mx:FormItem>
</mx:Form>

ValidableProperty.as

package utils
{
    import flash.events.EventDispatcher;
    import mx.events.PropertyChangeEvent;
    import mx.events.ValidationResultEvent;
    import mx.validators.Validator;

    public class ValidableProperty extends EventDispatcher
    {
        [Bindable]
        public var value:Object;

        private var validator:Validator;

        [Bindable]
        public var isValid:Boolean;

        [Bindable]
        public var errorMessage:String;

        private var statusChangeHandler:Function;

        public function ValidableProperty(validator:Validator, statusChangeHandler:Function=null,
                                          target:IEventDispatcher=null) {
            super(target);

            this.validator = validator;
            this.statusChangeHandler = statusChangeHandler;

            this.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler);
        }

        private function propertyChangeHandler(evt:PropertyChangeEvent):void {
            if (evt.property == "value") {
                this.validate();
            }
        }

        public function validate():void {
            var result:ValidationResultEvent = this.validator.validate(this.value);
            this.isValid = (result.type == ValidationResultEvent.VALID);
            if (isValid) {
                this.errorMessage = null; 
            }
            else {
                this.errorMessage = result.message;
            }
            if (statusChangeHandler != null)
                statusChangeHandler();
        }

        public function set required(required:Boolean):void {
            if (validator == null)
                return;
            validator.required = required;
        }
    }
}

当你执行这个简单的代码时，在写一个值时，例如“A”，errorMessage值“this field is required”将消失，但inputtext边框上的红色仍然是蓝色。< / p>

当删除A值时，此时蓝色将与红色（不能一直重现）和错误消息“此字段是必需的”。

我在这里缺少什么？它是flex的bug吗？我们不能在textinput边框上同时使用红色和蓝色。

我正在使用Eclipse和Flex SDK 4.5.0（build 20967）

Answer 1

这不是Flex中的错误。这是你如何编码所有的错误。如果您要关注example in the documentation，那就可以了。

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate StringValidator. -->
<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>
        <mx:StringValidator source="{nameInput}" property="text" 
                tooShortError="This string is shorter than the minimum length of 4. " 
                tooLongError="This string is longer than the maximum allowed length of 35." 
                minLength="4" maxLength="35"/>
    </fx:Declarations>

<s:Form>
    <s:FormItem label="Name">
        <s:TextInput id="nameInput" width="300" text="{nameID.value}"/>
    </s:FormItem>
</s:Form>

</s:Application>

Answer 2

我终于解决了这个问题。我使用的是mx：TextInput而不是s：TextInput。感谢J_A_X的建议！