Sign in Register
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

    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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies