CODEWITHSUNDEEP
javascripthtmlpolymer
Karthik
Karthik

Reputation: 115

How to automatically generate a paper-card with values from an input in polymer

How to automatically generate a paper-card with values from an input in polymer. This is what i have now with me.

Then delete the paper-card on clicking a button. How could i call all the values to the card and display it as different cards and be able to delete it.

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-view6">
    <template>
      <style include="shared-styles">
      :host {
        display: block;
        padding: 10px;
      }
      </style>

Html part

        <paper-input label="User Name" value={{username}} id="username" always-float-label maxlength="4" required error-message="Country Code Required"></paper-input>
        <paper-input label="Mobile Number" always-float-label value={{mobile}} minlength="10" maxlength="16" allowed-pattern="[0-9]" id="mobile" required error-message="Phone number Required as per the country code scheme"></paper-input>
        <paper-input label="Password" value={{password}} id="password" type="password" always-float-label minlength="6" required error-message="Password must be alleast 6 characters long">

        <paper-card></paper-card>

Javascript Part

 <script>
  Polymer({
    is: 'my-view1',

    properties: {
      username: {
        type: String
      },
      mobile: {
        type: Number
      },
      password: {
        type: String
      },
      </script>
      </template>
      </dom-module>

Upvotes: 0

Views: 109

Answers (1)

Niklas
Niklas

Reputation: 1299

You can just use data-binding and the properties to get your values into the paper-card. I placed all three values in one card but obviously this could be done separately in three different cards.

A paper card with all three values

<paper-card>
  <div class="card-content">
    <span>[[username]]</span>
    <span>[[mobile]]</span>
    <span>[[password]]</span>
  </div>
  <div class="card-actions">
    <paper-button on-tap="deleteInput">Delete</paper-button>
  </div>
</paper-card>

The delete function:

deleteInput: function() {
  this.set('username', '');
  this.set('mobile', '');
  this.set('password', '');
}

Upvotes: 1

Related Questions