自定义元素中的聚合物IronFormElementBehavior

Question

I'm using a custom date picker ( https://github.com/bendavis78/paper-date-picker ). It works fine, but what I'd like to do is tie it to a paper-input, so whenever the input is clicked, the dialog shows. I got that working by creating a custom element. My problem now, is that I need this element in an iron form, so I can send the date along with an ajax request. I've found that I need my custom element to extend the Polymer.IronFormElementBehavior, but I can't find any documentation on how to actually do that. The example just slaps it on a regular input element, so there is no useful context there. Here is my custom element with my attempt to implement the behavior:

<link rel="import" href="../../vendor/iron-form-element-behavior/iron-form-element-behavior.html">

<dom-module id="datepicker">

<template>
    <style>
    </style>

    <paper-input id="input" label="[[label]]" on-tap="openDatePicker" value="{{inputValue}}">
        <iron-icon icon="date-range" prefix></iron-icon>
    </paper-input>

    <paper-dialog id="datePickerDialog" class="paper-date-picker-dialog" name="dumb" modal on-iron-overlay-closed="_onDialogClosed">
        <paper-date-picker id="datePicker"></paper-date-picker>
        <div class="buttons">
            <paper-button dialog-dismiss>Cancel</paper-button>
            <paper-button dialog-confirm>OK</paper-button>
        </div>
    </paper-dialog>
</template>

</dom-module>

<script>
Polymer
({
    is: "datepicker"

    , behaviors:
    [
        Polymer.IronFormElementBehavior
    ]

    , properties:
    {}

    , ready: function ()
    {
        this.$.name = this.name;
    }

    // Custom functions //
    , _onDialogClosed: function(event)
    {
        if (event.detail.confirmed)
        {
            var date = new Date(this.$.datePicker.date);
            this.inputValue = moment(date).format("LL");
            this.$.value = this.inputValue;
        }
    }

    , openDatePicker: function()
    {
        this.$.datePickerDialog.open();
    }
});

I can't get the date value to show up in the post data, though. The behavior has a name and value property, and I feel like all I need to do is tie those to my paper-input, but that doesn't seem to do anything.

Has anyone actually successfully implemented this behavior? Am I missing something?

Answer 1

I ran into the same issue. The property name 'value' is special.

iron-input adds the bind-value property that mirrors the value property, and can be used for two-way data binding. bind-value will notify if it is changed either by user input or by script.

See docs

Currently you are using a property 'inputValue'. This should be changed to 'value'.

Your custom element needs to:

• Set a value property in the initial definition

• Update the code on change to this.value instead of this.inputValue

  Polymer ({ is: "datepicker"

   , behaviors: [ Polymer.IronFormElementBehavior ] , properties: { value : { type: String, value: "Default value" } } , ready: function () { this.$.name = this.name; } // Custom functions // , _onDialogClosed: function(event) { if (event.detail.confirmed) { var date = new Date(this.$.datePicker.date); // Update this to just "value" this.inputValue = moment(date).format("LL"); this.$.value = this.inputValue; } } , openDatePicker: function() { this.$.datePickerDialog.open(); } 

  });