Enable paper-inputs when button is clicked (polymer 1.0)

Question

I'm working on a project about a list of doctors and I'm using polymer 1.0.

For the doctor-list I use a vaadin-grid called doctors-grid.html where I'm getting the data from a JSON. When a doctor is double clicked, a modal dialog opens with the information about the selected doctor. The content of the dialog is a separate component called doctor-details.html.

The information about the doctor is written in disabled paper-input fields.

I have a modify button in this dialog. When I click on this button, the text of the button changes to "Save".

Now to my problem: Now I also want to enable these disabled paper-input fields when I click on the modify button, so I could change the information about the doctor. After I changed it I want to save the modified data back to the JSON and change the button again to "Modify" and disable all input-fields again.

This is a part of my doctor-details.html

<link rel="import" href="../../bower_components/paper-input/paper-input.html"/>
<link rel="import" href="../../bower_components/paper-input/paper-textarea.html"/>

<dom-module id="doctor-details">
  <template> 
      <table>
        <tr>
          <td>Name</td>
          <td><paper-input label="{{doctordata.name}}" disabled></paper-input></td>
        </tr>
        <tr>
          <td>Forename</td>
          <td><paper-input label="{{doctordata.forename}}" disabled></paper-input></td>
        </tr>
      </table>
  </template>

  <script>
    Polymer({
      is: 'doctor-details',
      properties: {
        doctordata: {
          type: Object,
          value: null
        }
  </script>
</dom-module>

This is from the doctors-grid.html, where I click the button and the paper-inputs from the doctor-details.html should be enabled, so I can modify them. And in this function i also should enable these inputfields.

         onClick: function() {
          var button = this.$.msbutton;
          button.textContent = 'Save';

          var inputfields = [];
        //How can I save all paper-inputs in this array?
        //How can I enable all paper-inputs?
        }

I don't post the whole code directly here, because I think it's easier when you look at the whole project (and it would be too much code). So I have a link to my dropbox: https://www.dropbox.com/s/crsrixs0nw6tvyy/WebContentEN.zip?dl=0

I googled and tried myself, but I always failed. I'm a beginner in polymer, so i would really appreciate it if someone can help me, because I really have no idea how to do this. Thanks!

I think you should isolate the immediate issue and post a minimal example here. Linking to entire project wont's attract good answers — Tomasz Pluskiewicz

Tomasz Pluskiewicz Tomasz Pluskiewicz · Accepted Answer · 2017-01-20T13:57:43

How can I save all paper-inputs in this array?

It's not a good idea to directly retrieve input fields from grid elements. You can control the disabled property with binding. On the inside you create a property in doctor-details and bind it to inputs.

<paper-input label="{{doctordata.name}}" 
             disabled="{{disabled}}></paper-input>

<script>
Polymer({ 
   is: 'doctor-details',
   properties: { disabled: Boolean }
});
</script>

On the outside add the same property and bind with each doctor-details.

<doctor-details disabled="{{editDisabled}}></doctor-details>

<script>
Polymer({ 
   is: 'doctor-grid',
   properties: { 
      editDisabled: {
         value: true
      }
   },

   onClick: function() {
        this.editDisabled = !this.editDisabled;
   }
});
</script>

How can I enable all paper-inputs?

To sum up, you control all input through a single boolean property bound to your elements.

Also, I'd rather have two buttons to hide/show depending on editDisabled rather than change the title of a single button.

Enable paper-inputs when button is clicked (polymer 1.0)

1 Answers