Sign in Register
Go to solution
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 59 posts 116 karma points c-trib
    May 04, 2017 @ 15:23
    Andrew Hawken
    0

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

    Extending Umbraco and using the API
    Umbraco 7

    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?

    Copy Link
  • Andrew Hawken 59 posts 116 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?

    Copy Link
  • Rune Hem Strand 147 posts 911 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

    Copy Link
  • Andrew Hawken 59 posts 116 karma points c-trib
    May 12, 2017 @ 13:58
    Andrew Hawken
    0

    Works (of course!)

    Many thanks!

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft