logo
down
shadow

Getting the input value of a Polymer paper-input inside a paper-dialog


Getting the input value of a Polymer paper-input inside a paper-dialog

By : user2955801
Date : November 22 2020, 10:48 AM
may help you . i worked around with this for a min and i am not sure exactly why i couldn't get things to work as i thought they should.
i copied your code and made a plunker. i was able to get your code to work basically as you have it now. but if i moved the submit paper-button inside the dialog it changed all return data to null. if i wrap it in a custom element i could get everything to work with a submit button inside the dialog or from outside.
code :
<polymer-element name="test-element">
  <template>
    <paper-dialog id="addGraph" backdrop transition="paper-dialog-transition-center">
      <div id="div" layout horizontal>
        <paper-button raised class="colored" self-center>Upload File</paper-button>
        <paper-input-decorator label="Enter URL for Dataset" floatingLabel error="A URL is required!" flex self-center>
          <input is="core-input" id="graphSource" required>
        </paper-input-decorator>
        <paper-button affirmative hover on-tap="{{addNewGraph}}">Submit</paper-button>
      </div>
    </paper-dialog>
    <paper-button affirmative hover on-tap="{{addNewGraph}}">Submit</paper-button>
    <paper-button affirmative hover on-tap="{{showDialog}}">Show Dialog</paper-button>
  </template>
  <script>
    Polymer("test-element",{
      showDialog: function () {
        this.$.addGraph.toggle();
      },
      addNewGraph: function () {
        console.log(this.$.graphSource.value);
      }
    })
  </script>
</polymer-element>


Share : facebook icon twitter icon
Polymer: get the value of paper-input inside a paper-dialog after paper-button press "ok"

Polymer: get the value of paper-input inside a paper-dialog after paper-button press "ok"


By : Jeffrey Gray
Date : March 29 2020, 07:55 AM
it should still fix some issue {{valHeader}} creates a property inside your note-list elelemt which is bound to the input value of the paper-input.
You can access it with
code :
var header = this.valHeader
Validation issues with polymer's new paper-input / paper-input-decorator components

Validation issues with polymer's new paper-input / paper-input-decorator components


By : user2757160
Date : March 29 2020, 07:55 AM
wish of those help To validate the input as the input value changes, the isInvalid property on paper-input-decorator should be bound to the input's validity.valid property. ie.
code :
<template is="auto-binding">
  <paper-input-decorator label="Number" floatingLabel
                         error="is not a number" 
                         isInvalid="{{!$.input.validity.valid}}">
    <input id="input" is="core-input" pattern="\d*">
  </paper-input-decorator>
</template>
<template is="auto-binding">
  <paper-input-decorator id="decorator" label="Number" floatingLabel
                     error="is not a number">
    <input is="core-input" pattern="\d*" on-input="{{inputAction}}">
  </paper-input-decorator>
</template>
<script>
  var scope = document.querySelector('template[is=auto-binding]');
  scope.inputAction = function(e) {
    var d = document.getElementById('decorator');
    d.isInvalid = !e.target.validity.valid;
  }
</script>
polymer: style paper-input focused floating label when paper-input is inside another element

polymer: style paper-input focused floating label when paper-input is inside another element


By : zed
Date : March 29 2020, 07:55 AM
should help you out If you are using Polymer 0.5.1 (the current version), you should be able to style the focused label using the selector my-element::shadow paper-input[focused] /deep/ .floating-label .label-text.
Polymer 1.x: How to remove whitespace from paper-menu inside paper-dialog?

Polymer 1.x: How to remove whitespace from paper-menu inside paper-dialog?


By : Mazharul Islam
Date : March 29 2020, 07:55 AM
I hope this helps you . Your CSS mixin (--paper-menu) should be declared inside a rule (it's currently outside any rules). I would move that into the paper-menu rule:
code :
paper-menu {
  margin: 0 !important;
  padding: 0 !important;
}
regex condition not working on polymer paper-input, how to allow only decimal on paper input?

regex condition not working on polymer paper-input, how to allow only decimal on paper input?


By : user2189553
Date : March 29 2020, 07:55 AM
To fix this issue From the doc:
pattern — RegEx pattern to validate input value
code :
<paper-input pattern="[A-Z]{2}[0-9]{6}"></paper-input>

/**
* For this input “EN123456” is a valid value, 
* but "EN123456 " or " EN123456" are invalid values
* because there are extra characters 
* and value doesn't match a pattern
*/
// accepts letters only
<paper-input allowed-pattern="[a-zA-Z]"></paper-input>

// accepts digits only
<paper-input allowed-pattern="[0-9]"></paper-input>

// accepts nothing, because one character cannot match this pattern
<paper-input allowed-pattern="[0-9][A-Z]"></paper-input>
<paper-input pattern="^(?!-0(?:\.0+)?$)-?(?:0|[1-9]\d*)(?:\.\d+)?$">
Related Posts Related Posts :
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org