I am attempting to create a Polymer 1.0 custom element. I have a paper-slider with a bound value. On page load, the value defaults to 100 despite what value has been provided. A paper-input with the same bound value shows the intended value on page load. When the paper-slider changes the paper-input changes with both having matched values.
<paper-input label="start" type="number" value="{{startPoint::input}}"></paper-input>
<paper-input label="location" type="number" value="{{locationPoint::input}}"></paper-input>
<paper-slider pin min="{{startPoint}}" max="{{endPoint}}" value="{{locationPoint::change}}" step="2.5"></paper-slider>
Under properties, both startPoint and locationPoint are of type Number, and have values coming from the element. endPoint is a computed property that uses both startPoint, locationPoint and other data to produce the results.
<example-element start-point="15" location-point="325"></example-element>
Produces two paper inputs with the number shown in the element, and a slider bar that has a knob located at 100. (The slider max computes correctly, and would be at some value like "500")
How do I get the slider value to match the locationPoint that I am feeding to it on page load?
EDIT:
The problem is with the order of how I defined the properties. I had them like this:
properties: {
locationPoint: Number,
startPoint: Number, ...
This fixed it
properties: {
startPoint: Number,
locationPoint: Number, ...
Can someone direct me to some documentation on this?
Related
I'm trying to get the browser to autocomplete searches based on values from a list.
here is the relavant part from the dbc.Input docs:
list (string; optional): Identifies a list of pre-defined options to suggest to the user. The value must be the id of a <datalist> element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the type attribute's value is hidden, checkbox, radio, file, or a button type.
here is my code:
but still, when I start typing there are just no suggestions:
what's wrong?
You are providing string instead of variable, this doesn't seem right?
If I use an angular component like this in my template:
<my-cmp selectable />
And my component asks the following in its constructor:
constructor(#Attribute("selectable") selectable: string){};
Then selectable will be an empty string, as expected, but when it is used like this:
<my-cmp [attr.selectable]="true" />
This will place the attribute correctly to my tag in the DOM and result in the following:
<my-cmp selectable="true" />
But in this case selectable will always have a null value, regardless if it is on construct or on ngOnInit and of its given value (e.g. false, "" or anything else will also result in null).
The question here is: why?
And more important: how to use boolean attributes in angular the best way?
Note: I explicitly don't want to use property-binding in this case, the given "input" should be static.
You can have some insight for the internals concerning #Attribute decorator here :
Angular does not read attribute values during runtime, only during
compile time, as otherwise we would get a performance hit.
With the <my-cmp [attr.selectable]="true" /> syntax, your are creating a binding. But the attribute value will be set after the first change detection cycle. So at compile time you will not have the attribute set, so you get a null value.
Have a look at the following screenshot. You can see that the text input field is empty, yet its value attribute is set to "b".
You'll also notice in the Properties tab, under input, that value here is set to "". Why are they different? What does this mean?
Could this be related to the fact that the input was rendered by React?
If it helps, here is the jsx responsible for this element (redacted):
return (
<td
key={field._id}
className={`oldField ${colPos}`}
>
<input
type="text"
defaultValue={value}
onChange={this.changeOldField(record, field)}
/>
</td>
)
It seems that you are changing the defaultValue based on something from the state. The defaultValue prop should be set only once and not changed later on, because any more changes will be ignored by React. If you want to change the value based on state you should use the normal value prop. Otherwise, if you want a predefined value to appear to the user and at the same time control the input when it gets changed, you can either use some logic in your code that handles both onChange and the code in your component that wants to automatically change the value, or possibly place it in the placeholder prop, which will give you something like what you want.
I have below input control in my html
<input id="inputcntrl" type="text" value="{{(mynumber) | number:'2.2-2'}}" [(ngModel)]="mynumber" (blur)="validatemynumber()" />
As you can see I am formatting input text to make sure it has two decimal values. It does work correctly when user enters the value in input box. onBlur event I am checking the value entered by user and if it is not within the range (min >mynumber>max) then I am setting mynumber with min value. Problem is mynumber displays min value with no formatting. forex: If min valule is 10 then input box should display 10.00 but it displays only 10..any idea how can I fix this? I am using angular2
Update: I think problem in my case is with somehow related to binding..When I update mynumber from my component and the new value is reflected in UI but its formatting is lost. mynumber variable is of type number. I need to find a way to update value with formatting from component
Try mynumber.toFixed(2)
<input id="inputcntrl" type="text" value="{{mynumber.toFixed(2)}}" [(ngModel)]="mynumber" (blur)="validatemynumber()" />
Here is a reference documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
If you want to format mynumber at your component with an angular way, try using built-in DecimalPipe at your component(the same as number pipe used at your template).
import { DecimalPipe } from '#angular/common'
this.mynumber = this.decimal.transform(this.mynumber, '2.2-2');
Plunker demo
I am using react-rails gem to work with ReactJS for Rails.
The weird thing is if I set a non-empty value property when rendering React component, the input field won't receive any keyboard event
This doesn't work!
React.DOM.input
type: 'text'
className: 'form-control'
value: "ABC"
But it works
React.DOM.input
type: 'text'
className: 'form-control'
value: ""
Any idea guys? Thanks a lot!
I have answered to one question similar to this, i don't know how to share that answer to you. So i am re-typing that.
In react, the component render's only when the state changes. Whenever the state of the component changes, then the corresponding component render. That means we are updating virtual DOM with new value and attach it to the main DOM. That's how react works.
In the case of input text fields the value of the text fields changes only when the user enter some value. In this case we are not updating any state, we are adding new value to "value" property of the text field. So the react wont render anything and new value is not added to the DOM. Here we are violating react behavior. So the react wont allow us to edit the input text fields.
In order to the get the smooth flow of the react, it allow us to use on change call back function in-order to set the state. On changing the value of the text filed, state set's with the new value so the react render and the DOM updated with the new value.
Instead of using call back function, we can use valuelink property to add value to input text. like:
getInitialState: function(){
return {
value:'' //for empty text value
}
}
For value link, we have to give state value instead of variable value. For complete understanding please refer:
https://facebook.github.io/react/docs/two-way-binding-helpers.html
whenever we enter the text in text box, the state get updated and the value of the input text set to state value.