This is a follow-up question to How to bind integer Input value to Slider.
I have found out that the demo solution in this answer only works when there are integer values in the slider and the language of your browser is set to English.
Snippet from the demo:
<Input xmlns="sap.m"
xmlns:core="sap.ui.core"
core:require="{FloatType: 'sap/ui/model/type/Float'}"
type="Number"
value="{
path: '/value',
type: 'FloatType'
}"
/>
To reproduce the issue:
Go to the settings of your browser.
Set e.g. German as the language.
Reload the demo.
If the step of the slider is then set to an integer value (e.g. 1), values are all shown correctly in the input field.
With step="0.1", however, only integer values are shown whereas float values (e.g. "1,4") are hidden, causing warning in the browser console:
The specified value "1,4" cannot be parsed, or is out of range.
Any ideas or better solutions?
In that case, remove type="Number" from the <Input> control.
The property type="Number" in UI5 shouldn't be used together with value-binding anyway, due to browsers implementing HTML <input type="number"> behavior slightly differently, according to the API reference:
Only the default value sap.m.InputType.Text may be used in combination with data model formats. (Source).
Found a solution:
A formatter is needed that replaces the "," with a ".":
formatStringToNumber: sNumber => parseFloat(sNumber.replace(","))
In the binding of the input then simply add the formatter:
<Input
width= "50px"
type="Number"
value="{
path: '/passageWidth',
formatter: 'formatStringToNumber',
type: 'FloatType',
formatOptions: { emptyString: 0 }
}"/>
Related
I want to read the default text inside an input text field. For Example: -
Reservation Text Value
I want to read - "Enter Reservation Number" from the input field. And I need to verify this text.
Here is the html value: -
<div class="input-field" ng-class="{'has-error': !$ctrl.isValid}">
<input id="reservation-number" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-maxlength" maxlength="30" required="" title="reservation-number" ng-blur="$ctrl.reservationModified($ctrl.reservationNumber);" ng-model="$ctrl.reservationNumber" type="text">
<label class="avoid-overlap ng-binding" for="resNumber"> Enter Reservations Number </label>
How can I read that using protractor?
I have tried these css value:-
element(by.css('.avoid-overlap.ng-binding').getText();
element(by.css('label.avoid-overlap.ng-binding').getText();
element(by.css('ng-pristine.ng-untouched.ng-empty.ng-invalid.ng-invalid-required.ng-valid-maxlength').getText();
getText() returns a promise.
See the documentation. An example explains how to solve it.
Thank you for the help. It is working now. I tried this code:-
element(by.css('[for="resNumber"]')).getText();
And It is working fine for me.
I need yours help. I have follow form:
{namespace femanager=In2code\Femanager\ViewHelpers}
<div class="femanager_fieldset femanager_membershipend control-group">
<label for="femanager_field_membershipend" class="control-label">
<f:translate key="tx_feusersplus_domain_model_user.membershipend" default="Expiration date of the membership"/>
</label>
<div class="controls">
<femanager:form.textfield
disabled="true"
id="femanager_field_membershipend"
property="membershipend"
class="input-block-level"
additionalAttributes="{femanager:Validation.FormValidationData(settings:settings,fieldName:'membershipend')}"
/>
</div>
</div>
And it get date in the next format - 1493942400. How I can make good look for date ? Thank you for advice!
Your property seems to be declared as integer (unix timestamp) in the model.
You can change the field to the following:
<femanager:form.textfield
disabled="true"
id="femanager_field_membershipend"
property="membershipend"
class="input-block-level" value="{yourModel.membershipend-> f:format.date(format: 'd.m.Y')}"
additionalAttributes="{femanager:Validation.FormValidationData(settings:settings,fieldName:'membershipend')}"
/>
This will format the property to a readable Date. But after that you will get problems saving the property correctly. If the property is really an integer, you need to write a converter for converting the date to an unix timestamp. It must work like here just in the reverse and I think TYPO3 does not have the correct converter for your needs out of the box.
I recommend you to change your property to DateTime (including the database field). Then you can use the DateTimeConverter of TYPO3 to save the data correctly.
EDIT: In your case the field is disabled="true" which should mean that the data will not become submitted. In that case you should not get problems with converting after submitting the form.
I am trying to set the value of a textbox with vuejs
#{{ message }} works in the body or in a tag.
this does not
<input type="text" name="column_name" v-model="reverseMessage" value="{{message}}">
Neither does.
<input type="text" name="column_name" v-model="reverseMessage" value="#{{message}}">
The problem is that you are trying to bind input value multiple variables. Both to reverseMessage (using v-model) and to value (using interpolation).
Please remove value="{{message}}" and just set reverseMessage variable - this should update the input view.
<input type="text" name="column_name" v-model="reverseMessage"/>
and then
this.reverseMessage = "my new input value"
You cannot bind input to many variables in the template itself. Use watchers or computed properties if you really need this.
I'm working on a bigger project with AngularJS. Therefore, I want to make the work for a single form as easy as possible. As we're also using bootstrap, the code for a single input field in a form is quite verbose, maybe like
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
If I could write a single tag like
<custom-input
label="Email"
name="inputEmail"
placeholder="Email"
type="text"
... >
</custom-input>
instead, this would help to keep the code clean and the work simple.
To achive this, I'm working on a custom AngularJS directive. My directive currently uses a template similar to the bootstrap example from above, automatically assigning the label to the input-tag. Also, the directive's compiler function moves all attributes from the custom-input tag to the real input-tag in order to make it easy to customize the custom-input tag.
app.directive('customInput', function() {
return {
require: 'ngModel',
restrict: 'E',
template: '<div>' +
'<label for="{{ name }}">the label</label>' +
'<input id="{{ name }}" ng-model="ngModel" />' +
'</div>',
scope: {
ngModel: '=',
name: '#name',
},
replace: true,
compile: function (tElement, tAttrs, transclude) {
var tInput = tElement.find('input');
// Move the attributed given to 'custom-input'
// to the real input field
angular.forEach(tAttrs, function(value, key) {
if (key.charAt(0) == '$')
return;
tInput.attr(key, value);
tInput.parent().removeAttr(key);
});
return;
},
};
});
On Stack Overflow, there are many questions regarding the creation of custom input fields, but they are concerned with the data binding, custom formatting or binding to ng-repeat.
My approach however has a different issue: while the data binding works correctly, Angular's integrated form validation module get confused when the input field is 'required'. For some reason, validation doesn't recognize the new input field and instead keeps the form invalid because of some dead reference, which has an empty value. Please see the minimal example.
Where does the dead reference come from? How can I update the validation-module's references? Is there a better way to achieve my overall goal?
As a boolean attribute, there is a corresponding required property that is still true on your div even if the attribute is moved.
The required attribute isn't getting moved, it must be getting skipped because there is no value. I don't know how to even add it to an element using javascript without a value, but using the form required="required" fixes that
Using transclude=true will use a copy of your element after the compile phase when you moved attributes, I think this keeps the required property from being set
You have to assign a higher priority for some reason, maybe because of ng-model, which is not removed from your div because the name in tattrs is ngModel (although removing from the div doesn't remove the need for priority)
http://plnkr.co/edit/5bg8ewYSAr2ka9rH1pfE?p=preview
All I did was change the required attribute to be required="required" and add these two lines to the directive declaration:
transclude: true,
priority: 10,
I put ng-transclude on the template label by the way so the contents of your element will go in the label and you don't have to have an attribute for that.
I have an input field for users to input a monetary amount:
<input type="number" value="{{ order.amount }}" />
I chose the number input type because I want the number keyboard to appear when the field is clicked. I can't use type="text" pattern="[0-9]*" (suggested here) because that causes the number-only input pad to appear which doesn't have a decimal point.
Unfortunately, if the value attribute is anything but numeric (including an empty string or space), the field renders with a default value of "0":
This stinks because the user needs to hit ⌫ before entering a value.
Is there any way to fix this?
Update: I'm an idiot. Some JavaScript was validating and reformatting the field. Nevermind.
I would look at the code you are using to set the value attribute of this field (value="{{ order.amount }}"). The reason I say this is that in Mobile Safari a "vanilla" numeric field is empty, i.e. no 0 by default.
Your screenshot suggests to me that you're using jQuery Mobile, so I checked using that in case the issue lay there, but again, no default value of zero.
For what it's worth, this is the mark-up I'm using (which renders an empty number field in iOS emulators and on an iPhone 3GS):
<input type="number" value="" />