In e2e testing, I want to simulate user typing in a input field. My input field has a maxlength in it. I want the maxlength to be consider, but I have not succeed to find a solution to it. Here's what I've tried:
<input type="text" id="myField" maxlength="10" ng-model="myModel" />
<span>{{myModel}}</span>
1) input("myModel").enter("ABCDEFGHIJKLMNOPQRSTUVWXYZ"). Both the myField input and the myModel model are set to "ABCDEFGHIJKLMNOPQRSTUVWXYZ". Expected result: "ABCDEFGHIJ"
2) element("#myField").val("ABCDEFGHIJKLMNOPQRSTUVWXYZ"). The myField input is set to "ABCDEFGHIJ". Which is perfect! But the myModel is null.
Do you guys have a solution for this? I don't want to use ngMaxlength since I want to prevent to use to typing more than 10 caracters.
Many thanks!
You could extend angular-scenario dsl and use a function similar to this one to inject a value in ngModelController
function typeIn(element, str) {
var maxlength = parseInt(element.attr('maxlength'), 10);
var value = element.val() + str;
if (maxlength !== NaN) {
value = value.substr(0, maxlength);
}
element.val(value);
element.controller('ngModel').$setViewValue(value);
element.scope().$apply();
}
http://jsfiddle.net/nxNm9/1/
Related
Using svelte, I want to set the default value of an input based on whether a checkbox is checked or not. The input is used in a drug dosage calculation. The calculation takes an value of weight in kg (k) x the input value.
I also need to have the drug calculation results change when this input value is changed by the checkbox action or when a user changes the input value manually, which doesn't happen currently.
I have been able to implement the input value change when the checkbox is checked but not clear on how to get the calculation to recalculate when the checkbox is checked or the input value is changed manually.
I need some help in integrating the correct input value into my calculation.
Checkbox:
let yes = false;
<input type=checkbox bind:checked={yes} >
Input:
<input value={yes? item.Fdosevalue : item.dosevalue} step={item.dosestep}
min={yes ? item.Fdosemin : item.dosemin} max={yes ? item.Fdosemax : item.dosemax} >
Calculation:
Not sure how to integrate the checkbox change in this calculation.
<span bind:this={k}> {( (k * item.dosevalue)).toFixed(1)} {item.appendvol} </span>
Here is a REPL which will hopefully make it a bit clearer
You can use data binding to accomplish this:
<input bind:value={...} />
You'll just need a place to store the values:
let values = {}
And then you bind to values with a unique key.
<input bind:value={values[item.name]}/>
Make sure to initialize the values dictionary with a default values for each fluid anytime the checkbox changes:
<input type=checkbox bind:value={yes} on:change={handleChange}/>
// initialize default values
function handleChange() {
const entries = fluids.map(item => {
const defaultValue = yes ? item.dosevalue : item.Fdosevalue
return [item.name, defaultValue]
})
values = Object.fromEntries(entries)
}
I have an array and a var
$scope.fcFeedTypes = [{"name":"Plain Text","value":"Plain Text"},{"name":"MQ Message","value":"MQ Message"}];
}
$scope.feedEditor.ft = "MQ Message"; // this is dynamically obtained from some other source
I want a dropdown select with default selection based on the value of $scope.feedEditor.ft
HTML:
<select ng-model="fcFeedTypes"
ng-options="ft.name for ft in fcFeedTypes"
ng-init="ft=feedEditor.ft">
I am new to AngularJS and need some help...
If you just want the string "MQ Message" (or the value of whatever a user selects) as your ng-model value, then it's quite simple:
<select ng-model="someModelName"
ng-options="ft.value as ft.name for ft in fcFeedTypes"
ng-init="someModelName=feedEditor.ft">
If you want the full object as the ng-model value, then you've got to find the right one in JS. It must be referentially/strictly equal to the one in the options.
<select ng-model="someModelName"
ng-options="ft.name for ft in fcFeedTypes">
-
$scope.fcFeedTypes = [{"name":"Plain Text","value":"Plain Text"},{"name":"MQ Message","value":"MQ Message"}];
$scope.feedEditor.ft = "MQ Message"; // this is dynamically obtained from some other source
angular.forEach($scope.fcFeedTypes, function(feedType){
if(feedType.value === $scope.feedEditor.ft){
$scope.someModelName = feedType;
}
});
I have a situation where I have couple of readonly fields in the form like with others to show the problem
You can see the las two inputs are readonly and they are calculated inputs where total debit is calculated by totalDebit function on $scope and total credit is calculated by totalCredit() function on the $scope. The problem is inputs only reflect ng-model values which is zero for both inputs and does not take value from calculating functions. A simplified controller is
app.controller('myController', ['$scope' ,function($scope){
$scope.credit = 0;
$scope.debit = 0;
$scope.debitSum = 0;
$scope.creditSum = 0;
$scope.totalCredit = function(){
return $scope.credit + 200; //just to show that it is calculated field
}
$scope.totalDebit = function(){
return $scope.debit + 200; //just to show that it is calculated field
}
}]);
If you remove ng-model directive from readonly inputs they will assume their values from totalDebit and totalCredit functions respectively. But I want them to use values from functions and also update $scope properties of totalDebit and totalCredit. Here is the plunker for this code
Should not be answer here (Why the ng-value is not doing what expected):
ngValue
Binds the given expression to the value of <option> or input[radio], so that when the element is selected, the ngModel of that element is set to the bound value.
And that is not our case...
Because, the ngValue is triggered on CHANGE. When we select radio or some option in the <select>
So, ng-value is not the proper setting in this scenario.
We can adjust it like this:
<input name="totalDebit" value="{{totalDebit()}}" readonly="" />
<input name="totalCredit" value="{{totalCredit()}}" readonly="" />
See updated plunker
hi i'm really struggling with this and not sure how to proceed as I haven't found anything ont his. Here's the plunkr example I'm working with: example.
I want to append something at the end of the results for example if I type S, I want to get the results and the last line should say "Look for S in other shops" :
Sauron
Bowser
Yoshi
Look for S in other shops
As you can see in my plunker, whatever I do in the template, ends up getting repeated.
Define your custom filter:
.filter('finalAppend', function(){
return function(array, value){
array.push({
name: 'Look for ' + value + ' in other shops',
type: 'good'
});
return array;
}
});
And use it like this:
<input type="text" ng-model="selected"
typeahead="datum.name for datum in (data|filter:$viewValue|limitTo:8)|finalAppend:$viewValue"
typeahead-template-url='tpl.html'>
Example
<input type="text" ng-model="user.User.DateOfBirth"> is in my view. user.User.DateOfBirth is currently in YYYYMMDD format, but I want it to show as mm/dd/yyyy format in the view. Is it possible to convert this just for the display?
This also may help you
http://jsfiddle.net/mikeeconroy/Hu9m2/1/
.filter('myFormatDateFilter',function(){
return function(input){
if(angular.isDefined(input)){
if(input.length >= 8){
input = input.slice(0,8);
input = input.slice(4,6) + '/' + input.slice(6,8) + '/' + input.slice(0,4);
}
}
return input;
};
});
For outputting the data in the correct format try filters (in your case the date filter: http://docs.angularjs.org/api/ng.filter:date)
Well, for inputs that's another case. I guess you could always bind that input to another property, watch that and parse it yourself and then assign it to your real model...
Some more insight, you could try something like this:
HTML:
<input type="text" ng-model="myDateInput">
In your JS controller use the following:
$scope.$watch('myDateInput', function (newValue) {
$scope.user.User.DateOfBirth = $filter('date')(newValue, 'yyyy-MM-dd'); // Or whatever format your real model should use
});
$scope.$watch('user.User.DateOfBirth', function (newValue) {
$scope.myDateInput = $filter('date')(newValue, 'yyyy-MM-dd'); // Or whatever format your input should use
});
It would probably be better though to force the user to use a certain input format, either by some sort of pattern matching (and therefore validation) or by some sort of special date input/widget.