We Keep Coding

detect as soon as there is value populated using javascript or entered using keyboard in input field

I have written this code which detects if there is a value populated in productName field using javascript and then it parses and auto-populate the input field quantity. My code only works if productName field is populated through javascript code and fails to register keyboard inputs if I use onChange
I want to detect in both scenarios i.e javascript and keyboard, how do I detect using the keyboard in this code?
const input = document.getElementById('productName');
const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
Object.defineProperty(input, 'value', {
set: function(t) {
console.log('Input value was changed programmatically');
descriptor.set.apply(this, arguments);
document.getElementById("quantity").value=t
},
get: function() {
return descriptor.get.apply(this);
}
});
var i=0;
function changeInput(){
/* console.log(document.getElementById('productName').value) */
document.getElementById("productName").value=i++;
}
<input type="text" id="productName" name="productName" placeholder="product name">
<input type="text" id="quantity" name="quantity" placeholder="quantity">
<button onclick="changeInput()">Change</button>

Since I am a beginner in Javascript, a comment by #epascarello helped me, and this was quite easy with binding the input element:
document.getElementById("productName").addEventListener("input",(event)=>{
document.getElementById("quantity").value= document.getElementById("productName").value;
})

get input value in typescript

I had 2 input value, I need to do validation on first input value which is credit card number input, get input value on ts file and check validation on API while user still typing on second input, example of my first input value: 4444 4444 4444 4444, so i need to use subString() to get first 6 number before do validation,
this is what I had tried;
html file
<div>
<input
(keypress)="numberOnly($event)"
class="input"
type="text"
(keyup)="onKey($event)"
[(ngModel)]="creditCardNo"
/>
</div>
<div>
<input
class="input"
type="text"
[(ngModel)]="cardHolderName"
/>
</div>
ts file
onKey(event) {
this.creditCardNo = event.target.value;
const test = this.creditCardNo
.replace(/\s/g, '')
.toString()
.substr(0, 6);
this.paymentService.getCreditCardDetail('JPJSMN', test).subscribe(res => {
if (!res) {
return;
}
console.log(res);
});
}
using (keyup)="onKey($event)" to get value change, and do a validation on ts file based on response I get, however I notice if Im using (keyup)="onKey($event)", it doesnt detect copy and paste, and it keep requesting API,if there are better practice to solve this ?

You can opt to create a custom 'digitOnly' Angular directive.
A great guide on how to do this can be found here:
https://codeburst.io/digit-only-directive-in-angular-3db8a94d80c3
The directive shown in the tutorial address issues such as copy and paste.

If you just want to get the model updated when the user pasts something the same way as editing the value, you can just use
(ngModelChange)="pasteEvent($event)"
<div>
<input
(keypress)="numberOnly($event)"
class="input"
type="text"
(ngModelChange)="pasteEventcreditCardNo(creditCardNo)"
[(ngModel)]="creditCardNo"
/>
</div>
<div>
<input
class="input"
type="text"
(ngModelChange)="pasteEventcardHolderName(cardHolderName)"
[(ngModel)]="cardHolderName"
/>
</div>

Angular UI-Bootstrap Typeahead: Accept top item as selected on ENTER

Simple question, but is there a way to have the first item in the dropdown results be the selected item when ENTER is pressed?
An example of this is the user types in "PC0" and sees "PC001" listed as the first option, can we have it use "PC001" on the typeahead-on-select option when ENTER is hit?
I am currently using typeahead-on-select to run a function that calls the input via id and grabs the Value for use in the function. It seems to use what was entered into the textbox instead of the selected value, either on ENTER or Click.
HTML:
<input id="applicationComboBox"
type="text"
ng-model="applicationComboBox"
uib-typeahead="a as a.Value for a in applicationList | filter:$viewValue"
typeahead-on-select="getApplication()"
class="form-control">
JS for the getApplicationValue() looks like this:
$scope.getApplication = function () {
$scope.ApplicationValue = applicationComboBox.value;
}
The issue is the applicationComboBox.value is what text the user has typed into the input at the time of the click/enter instead of the clicked/highlighted value respectively. So in previous example "PC0" would be the value instead of "PC001".

When the user selects/press enter the ng-model applicationCombox is is updated automatically. If you want another value $scope.ApplicationValue to be updated after the selection, do the following
$scope.applicationCombox = ""; //your existing model.
$scope.getApplication = function () {
$scope.ApplicationValue = $scope.applicationCombox;
}
Let us know.

I was able to get a solution that worked for me.
HTML:
<input id="applicationComboBox"
type="text"
ng-model="applicationComboBox"
uib-typeahead="a as a.Value for a in applicationList | filter:$viewValue"
typeahead-on-select="onApplicationSelect($item, $model, $label, a)"
class="form-control">
JS:
$scope.onApplicationSelect = function (item, model, label, application) {
applicationComboBox.value= item.Value;
}

How to have unique suggestion on input in SAPUI5

I am trying to get suggestions from input box, but if model has multiple values in wheelName like "wheel1", "wheel1", "wheel2", and with this, when I enter "wheel1" in inputbox, i get 2 suggestions as wheel1, wheel1, but i want unique suggestion i.e. wheel1 to be shown only once.
Input declaration looks like below:-
<Input
id="wheelInput"
type="Text"
placeholder="Enter Wheel..."
showSuggestion="true"
maxLength="40"
startSuggestion="3"
suggestionItems="{wheel>/results}" >
<suggestionItems>
<core:Item text="{wheel>wheelName}"/>
</suggestionItems>
</Input>

Assuming your results list differs with every character you type into your input, you can attach a function to the liveChange of the Input field.
You can then put your custom logic (e.g. no double names) into a separate model property. I haven't tested the code but Ii should work (provided I didn't make a typo).
View:
<Input
id="wheelInput"
type="Text"
placeholder="Enter Wheel..."
showSuggestion="true"
maxLength="40"
liveChange="filterWheelList"
startSuggestion="3"
suggestionItems="{wheel>/filteredWheelList}" >
<suggestionItems>
<core:Item text="{wheel>wheelName}"/>
</suggestionItems>
</Input>
Controller:
filterWheelList: function(){
var wheelModel = sap.ui.getCore().getModel("wheelModel");
var wheelList = wheelModel.getProperty("/results");
var uniqueNames = [];
var filteredWheelList = wheelList.filter(function(wheel){
if (uniqueNames.indexOf(wheel.wheelName) === -1){
uniqueNames.push(wheel.wheelName);
return true;
} else {
return false;
}
});
wheelModel.setProperty("/filteredWheelList", filteredWheelList);
}

AngularJS Filter, set class of of label and input field with validation

I have an Angular app with a list of F1 drivers. I want to put a filter on the table, so I can get drivers by their first or by their last name.
To make this I use following design:
Normally the label and the line of the input are black. I want to check if the input value only is a String value (a-zA-Z). I use following code in my partial view:
<div class="form-group col-xs-5 col-md-3">
<label class="control-label" for="inputError">input must be [a-zA-Z]</label>
<div class="form-control-wrapper">
<input ng-model="nameFilter" type="text" name="nameFilter" class="form-control empty" placeholder="Search Driver name...">
<span class="material-input"></span>
</div>
</div>
This input value is bound with following filter (declared in my controller.js)
$scope.searchFilter = function (driver) {
var re = new RegExp($scope.nameFilter, 'i');
if(! (/[^a-zA-Z]+/).test($scope.nameFilter)){
$scope.nameFilter.class ='control-label';
}
return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);
};
But this doesn't work.. What am I missing?

Regex
Your Regular expression is wrong, check out its validity here
change it from
/[^a-zA-Z]+/
to
/^[A-Za-z]+$/