Polymer dart: Data bind integer value to String attribute

Issue

I am trying to bind an integer to a String attribute. To say exactly, I am trying to bind a published integer variable to the value attribute of the text input element.

@published int data = 0;

<input type="number" value="{{data}}">

Obviously, a reference of String is getting stored in what is supposed to be an integer.

I tried to use filter to solve this issue, but still could get it to work:

int integerize(Object a) {
  int ret = 0;
  if (a is String) {
    try {
      ret = int.parse(a);
    } on FormatException catch (e) {
    }
  } else if( a is int) {
    ret = a;
  }
  return ret;
}

<input type="number" value="{{data | integerize}}">

So I switched to not using binding for this. Can somebody suggest a better, efficient solution using binding?

Solution

For Polymer 1.0.0 this worked fine for me

Create a reusable behavior or just add the convertToNumeric() to your Polymer element:

@HtmlImport('app_element.html')
library app_element;
import 'dart:html' as dom;
import 'package:web_components/web_components.dart' show HtmlImport;
import 'package:polymer/polymer.dart';

@behavior
abstract class InputConverterBehavior implements PolymerBase {
  @reflectable
  void convertToInt(dom.Event e, _) {
    final input = (e.target as dom.NumberInputElement);
    double value = input.valueAsNumber;
    int intValue =
        value == value.isInfinite || value.isNaN ? null : value.toInt();
    notifyPath(input.attributes['notify-path'], intValue);
  }
}

Apply the behavior to your element:

@PolymerRegister('app-element')
class AppElement extends PolymerElement with InputConverterBehavior {
  AppElement.created() : super.created();

  @property int intValue;
}

In HTML of your element configure the input element:

  • bind value to your property: value="[[intValue]]" so the input element gets updated when the property changes
  • set up event notification to call the converter when the value changes on-input="convertToNumeric" notify-path="intValue" where intValue is the name of the property to update with the numeric value.
<!DOCTYPE html>
<dom-module id='app-element'>
  <template>
    <style>
      input:invalid {
        border: 3px solid red;
      }
    </style>
    <input type="number" value="[[intValue]]"
           on-input="convertToInt" notify-path="intValue">

    <!-- a 2nd element just to demonstrate that 2-way-binding -->
    <input type="number" value="[[intValue]]"
           on-input="convertToInt" notify-path="intValue">
  </template>
</dom-module>

An alternative approach

Create a property as getter/setter:

  int _intValue;
  @property int get intValue => _intValue;
  @reflectable set intValue(value) => convertToInt(value, 'intValue');

Create a behavior or add the function directly to your element

@behavior
abstract class InputConverterBehavior implements PolymerBase {
  void convertToInt(value, String propertyPath) {
    int result;
    if (value == null) {
      result = null;
    } else if (value is String) {
      double doubleValue = double.parse(value, (_) => double.NAN);
      result =
          doubleValue == doubleValue.isNaN ? null : doubleValue.toInt();
    } else if (value is int) {
      result = value;
    } else if (value is double) {
      result =
          value == value.isInfinite || value.isNaN ? null : value.toInt();
    }
    set(propertyPath, result);
  }
}

This way you can use the same markup as for text input fields

<input type="number" value="{{intValue::input}}">

or if you want to delay the update of the property until the input field is left

<input type="number" value="{{intValue::change}}">

Answered By – Günter Zöchbauer

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *