Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Andrew Hawken 57 posts 114 karma points c-trib
    May 04, 2017 @ 15:23
    Andrew Hawken
    0

    Custom property editor input type=number doesn't show value

    The following code will set a value for a property, but does not display it on page load

    <div>
    <input name="sumNumber" type="number"
           ng-model="model.value"
           ng-pattern="/^\d+$/"      />
    <span class="help-inline" val-msg-for="sumNumber" val-toggle-msg="pattern">Enter digits only.</span></div>
    {{model.value}}
    

    I can see the number in {{model.value}} but its not set as the value in the input box.

    If I change the input type=number to text, then it behaves as expected.

    Any idea what is going on there? Do I have to do something special to get a number editor to work?

  • Andrew Hawken 57 posts 114 karma points c-trib
    May 06, 2017 @ 09:53
    Andrew Hawken
    0

    After sleeping on it, I did wonder if this was because the input type="number" as an angular directive, which requires a number rather than a string.

    So I added a property converter

     public class NullableIntPropertyConverter : IPropertyValueConverterMeta
     {
        public bool IsConverter(PublishedPropertyType propertyType)
        {
            return propertyType.PropertyEditorAlias == "sum.NullableInt";
        }
    
        public object ConvertDataToSource(PublishedPropertyType propertyType, object source, bool preview)
        {
            var attempt = source.TryConvertTo<int?>();
            if (attempt.Success)
            {
                return attempt.Result;
            }
    
            return null;
        }
    
        public object ConvertSourceToObject(PublishedPropertyType propertyType, object source, bool preview)
        {
    
            if (source == null || UmbracoContext.Current == null)
            {
                return null;
            }
            return ConvertDataToSource(propertyType,source,preview);
        }
    
        public object ConvertSourceToXPath(PublishedPropertyType propertyType, object source, bool preview)
        {
            return source.ToString();
        }
    
        public Type GetPropertyValueType(PublishedPropertyType propertyType)
        {
            return typeof(int?);
        }
    
        public PropertyCacheLevel GetPropertyCacheLevel(PublishedPropertyType propertyType, PropertyCacheValue cacheValue)
        {
            PropertyCacheLevel returnLevel;
            switch (cacheValue)
            {
                case PropertyCacheValue.Object:
                    returnLevel = PropertyCacheLevel.ContentCache;
                    break;
                case PropertyCacheValue.Source:
                    returnLevel = PropertyCacheLevel.Content;
                    break;
                case PropertyCacheValue.XPath:
                    returnLevel = PropertyCacheLevel.Content;
                    break;
                default:
                    returnLevel = PropertyCacheLevel.None;
                    break;
            }
    
            return returnLevel;
        }
    }
    

    but this didn't help at all. Is the property converter right, or have I missed something else?

  • Rune Hem Strand 146 posts 905 karma points hq c-trib
    May 08, 2017 @ 10:32
    Rune Hem Strand
    100

    Hi Andy

    There is a known angular bug when fetching ints with model.value . In order to fix this, you'll need to add the fix-number directive to the input field.

    <input name="sumNumber" type="number"
       ng-model="model.value"
       ng-pattern="/^\d+$/"
       fix-number />
    

    That should do the trick! The fixnumber directive is used on the core number datatype as well.

    /rune

  • Andrew Hawken 57 posts 114 karma points c-trib
    May 12, 2017 @ 13:58
    Andrew Hawken
    0

    Works (of course!)

    Many thanks!

Please Sign in or register to post replies

Write your reply to:

Draft