1

I want to read the contents of a paper-input after pressing a button in Dart. I've tried other suggestions such as reading value and inputValue attributes on both the paper-element and the internal html <input>.

Searching the page source doesn't reveal what is in the paper-input. I found the contents inside of a private member of the inner html <input>, but I'm not sure if using Mirrors in Dart can reflect private members.

The relevant value attribute resides at:

paper-element -> inner html <input> -> attributes map -> 
    private variable named _element

So the attributes map instance has some members that are not part of the map. Its _element member has a value uh field which contains the text residing in the paper-input.

Tell me I'm missing something.

EDIT: Here is what ended up being the solution: Instance of Paper elements in dart

Community
  • 1
  • 1
Jacob Phillips
  • 8,841
  • 3
  • 51
  • 66

1 Answers1

3

I tried it yesterday and it worked mostly with inputValue (while editing) and value after leaving the input element using the tab key.

Ensure you are using the latest Polymer element.

dependencies: polymer: ">=0.12.0-dev <0.13.0"

(A special dependency constraint is necessary to get development releases of dependencies)

When accessing the value like

($['my-input'] as PaperInput).value // or .inputValue

returned the old value, but

<paper-input value='{{value}}' inputValue='{{inputValue}}` placeholder='enter text here></inputValue>

@observable String value;
@observable String inputValue;

worked

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • I'm using ">=0.11.0 <0.12.0"! – Jacob Phillips Jul 14 '14 at 04:59
  • It might be related to using `HtmlElement` instead of `PaperInput` because it kept giving me errors from `querySelector()`. There were some workarounds here on SO but I didn't really follow so I've been using the attributes map. Everything else has worked so far, but this `paper-input` is like fort knox :P. I'll look at it again tomorrow. Thanks for the help. – Jacob Phillips Jul 14 '14 at 05:22
  • Didn't try using attributes. You can use direct field access `shadowRoot.querySelector('paper-input').value` event though DartEditor shows a warning or use `(shadowRoot.querySelector('paper-input') as PaperInput).value` (you need to add an import for `PaperInput` like `import 'packages:paper_elements/paper_input.dart'`. But as I explained in my anser I had troubles too accessing the value fields using code. Template binding worked though. – Günter Zöchbauer Jul 14 '14 at 05:26
  • where are you getting the shadowroot instance? – Jacob Phillips Jul 14 '14 at 20:18
  • This is from code inside a Polymer element or when you reference a Polymer element like `(querySelector('paper-input') as PaperInput).shadowRoot.querySelector('input'). and so on` – Günter Zöchbauer Jul 14 '14 at 21:03
  • Sorry it simply doesn't allow that. Even though PaperInput is a subtype of HtmlElement, it throws an exception because "HtmlElement is not a subtype of PaperInput". – Jacob Phillips Jul 14 '14 at 21:15
  • I don't entirely understand your comment. You need to import `import packages:paper_elements/paper_input.dart` to make such a 'cast' work. Can you provide more detailed information at which point the error occurs? I haven't actually tried the code I posted but I'm pretty sure it works this way. – Günter Zöchbauer Jul 14 '14 at 21:19
  • I have the imports already. The code is at https://github.com/jphilli85/grujin/blob/master/web/grujin.dart. The exception occurs on the querySelector line if I use a PaperInput instead of HtmlElement. Various casts all cause the same exception. For instance, "_subject" in that file is a paper-input. – Jacob Phillips Jul 14 '14 at 21:22
  • Normally when casting to the concrete PolymerElement type doesn't work the Element isn't initialized properly or an import path is wrong which prevents Polymer to recognize that the element is of that type. I couldn't find a relevant line in your code. (I'm no longer available today but I'll look into it if you add a comment) – Günter Zöchbauer Jul 14 '14 at 21:26
  • I made another post with html and dart shortened as much as possible, but describing the same problem: http://stackoverflow.com/questions/24745751/instance-of-paper-elements-in-dart – Jacob Phillips Jul 14 '14 at 21:38
  • Will the dev version listed work with angular / ng-model? I could not get that working with the initial release of the paper elements but sounds like maybe that's partially addressed? – Nicholas Tuck Jul 15 '14 at 02:36
  • I also wasn't yet able to get paper-elements with Angular.dart working http://stackoverflow.com/questions/24724848 – Günter Zöchbauer Jul 15 '14 at 04:26