I have to restrict a input field to accept only numbers. We are not using "lightning-input".
How to use below js function in Lightning web component?
function isNumber(evt) {
var iKeyCode = (evt.which) ? evt.which : evt.keyCode
if (iKeyCode != 46 && iKeyCode > 31 && (iKeyCode < 48 || iKeyCode > 57))
return false;
return true;
}
See below:
.html file
<lightning-card>
<div class="slds-m-around_medium">
<input type="number" onkeypress={handleKeyPress} pattern="[0-9]" class="slds-input" />
</div>
</lightning-card>
.js file
handleKeyPress(event) {
let input_number = event.target.value;
console.log('Number: '+input_number);
}
Results/output
I believe it allows "e" & "k" as valid numbers,
here's what I did
.html file
<input class="numfield" onkeydown={onlyNumericAllowed} type="number" >
.js file
onlyNumericAllowed(event) {
if(event.keyCode === 69){
event.preventDefault();
}
const value = event.target.value;
console.log(event.charCode);
if (value && (!/^[0-9]+$/.test(value) || event.keyCode == 0)) {
this.template.querySelector('.numfield').value = value.replace(/\D/g, '');
}
}
Related
I am getting Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=%5Bobject%20Promise%5D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings in below function.Please help me on this.
viewMultipleFile(){
var totalFiles=this.props.crewQualification.files[this.props.crewQualification.completeData[0].id].length;
if(typeof this.props.crewQualification.files!='undefined') {
let files= this.props.crewQualification.files[this.props.crewQualification.completeData[0].id].map((item,index)=>{
//this.viewDocument(localStorage.getItem("USER_FILE_UPLOAD_PATH") + this.props.crew.login_id + '/' + item.file)
let file=localStorage.getItem("USER_FILE_UPLOAD_PATH") + this.props.crew.login_id + '/' + item.file;
if (typeof file != 'undefined' && file != null) {
if(file?.charAt(0)=="/"){
file=file.substring(1);
}
}
const filename = file;
if (typeof file != 'undefined' && file != null) {
var fileFullname = filename.split("/");
fileFullname = fileFullname[fileFullname.length-1];
var fileType = fileFullname.substr((fileFullname.lastIndexOf('.') + 1));
//this.setState({fileType:fileType,downloadSrc:filename});
if(process.env.MIX_ENVCHECK == "server"){
let formData = {
file: filename
}
let Url = 'common/image-path';
var srcPath="";
return apiCall.post(Url,formData).then(response => {
srcPath =response.data;
});
}else{
srcPath = localStorage.getItem('API_URL')+filename;
}
}
return (
<>
<p class="text-right" style={{margin:'5px'}}>
File {index+1} of {totalFiles}
<a href="#" class="btn" onClick={(e) => this.downloadReport(e,filename)}><i className={"fa fa-download"} style={{margin:'0'}}></i> Download</a>
</p>
{ (fileType!='doc' && fileType!='DOC' && fileType!='msword' && fileType!='MSWORD') &&
<>
<FileViewer
fileType={fileType.toLowerCase()}
filePath={srcPath}
/>
</>
}
{ (fileType=="DOC" || fileType=='doc' || fileType=="msword" || fileType=='MSWORD') &&
<iframe src={'https://docs.google.com/gview?url=' + encodeURIComponent(srcPath)+"&embedded=true&crossorigin=anonymous"}></iframe>
}
{
(index+1 < totalFiles) &&
<hr/>
}
</> )
});
return files
}
}
I am trying to make a select, where I can select different cities and filter out the ones not from the selected cities, my filter seem to work, but I can't select more than one city even tho I have set isMulti on Select I have also tried isMulti={true} but it does not work, I think it is my handler that doesn't work:
handleChange (selectedOptions) {
selectedOptions.map(o => this.setState({by: o.value.value}))
//var options = selectedOptions.value;
/*var value = [];
for (var i = 0, l = options.length; i < l; i++) {
if (options[i].selected) {
value.push(options[i].value);
}
}*/
console.log(selectedOptions)
}
the one commented out does not work either but it did work with html tag select.
this is my filter:
const filteredUsers = (usersGet.filter(item => {
const checkHairColor = () => {
if(Array.isArray(haircolor)) {
return haircolor.length > 0 ? haircolor.includes(item.haircolor) : true;
} else {
return (haircolor === '') || (haircolor === item.haircolor);
}
}
const checkCity = () => {
if(Array.isArray(city)) {
return city.length > 0 ? by.includes(item.city) : true;
} else {
return (city === '') || (city === item.city);
}
}
const filter = (item.navn.toLowerCase().includes(searchfield.toLowerCase()) ||
item.navn.toLowerCase().includes(searchfield.toLowerCase()) === '')
&& (item.age > minage || minage === '')
&& (item.age < maxage || maxage === '')
&& checkHairColor()
&& checkCity();
console.log(filter);
return filter
}))
But my filter I'm pretty sure works, but not for sure since I haven't gotten an array to send to the filter yet.
<Select
isMulti={true}
hideSelectedOptions={false}
closeMenuOnSelect={false}
isSearchable={true}
name="by"
value={selectedOptions}
onChange={this.handleChange}
options={byer}
/>
https://stackblitz.com/edit/react-fntxzp?file=index.js
The problem with select was, that you did not updated the state correctly. If you are updating state in react, you should provide a brand new object. And update just the part you need to change.
https://stackblitz.com/edit/react-uygysb?file=index.js
i want disable image with angular js i used a function to do that i have this error Cannot create property 'type' on string:
Controller :
$scope.ActivePlaceSpotCAM = function (idPlace, typePlace) {
var res = null;
angular.forEach($scope.ListPlaces, function (value, key) {
angular.forEach(value.type, function (value ,key) {
if (value.type = typePlace && value.id == idPlace) {
res = value;
}
});
});
return res;
}
html :
<div class="SvgPicto col-lg-2 col-md-2 col-sm-2 col-xs-2">
<img src="#Url.Content("~/Resources/Common/pic.svg")" ng-init="configuredPlaces[#nbPlace] == place.type" ng-if="ActivePlaceSpotCAM(place.id,place.type)"/>
</div>
You are doing assignment operation in if please correct
if (value.type = typePlace && value.id == idPlace)
to
if (value.type == typePlace && value.id == idPlace)
And please check the type of value it should not be a string.Before comparing you should check weather the type property is existing or not.
In extending to the question how to disable submit button or make form invalid if i have any duplicates
Got Solution : here is my code
HTML
Submit
JS
$scope.myform.$setValidity('invalid',!((sorted[i-1] && sorted[i-1].voucherCode == sorted[i].voucherCode) || (sorted[i+1] && sorted[i+1].voucherCode == sorted[i].voucherCode)));
Somewhere in your Controller
$scope.hasDuplicate = function() {
var sorted;
sorted = $scope.csTagGrp[0].csTags.concat().sort(function(a, b) {
if (a.keys > b.keys) return 1;
if (a.keys < b.keys) return -1;
return 0;
});
return sorted.some(function(nth, i){
if(i> 0 && i < sorted.length) {
return ((nth[i - 1].keys == nth.keys) || (sorted[i + 1].keys == nth.keys));
}
return false;
});
};
In template
<button type="submit" ng-disabled="hasDuplicate()"> Save </button>
I want to make textbox numeric only in my Angular JS application.
Here is my code-
script.js
app.directive('numbersonly', function () {
return {
restrict: 'A',
link: function (scope, elm, attrs, ctrl) {
elm.on('keydown', function (event) {
if (event.which == 64 || event.which == 16) {
// to allow numbers
return false;
} else if (event.which >= 48 && event.which <= 57) {
// to allow numbers
return true;
} else if (event.which >= 96 && event.which <= 105) {
// to allow numpad number
return true;
} else if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {
// to allow backspace, enter, escape, arrows
return true;
} else {
event.preventDefault();
// to stop others
return false;
}
});
}
}
});
And on UI-
<input type="text" id="txtEmpAge" data-ng-model="newemployee.Age" class="form-control" numbersonly required />
But the text box is accepting both numeric and character.
If it is not necessary to use your own implementation, try Angular's number type input.
You can use type=number
<input type="number" id="txtEmpAge" data-ng-model="newemployee.Age" class="form-control" required />
This will take only number values in the text box.
in my opinion, best way to achieve
, it will also not allow user to copy paste strings to input
<input type="number" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>
Use the following snippet to make the input field to accept only characters between 0 to 9. This will eliminate the decimal pointer.
<input type="number" onkeypress="return isNumKey(event)"/>
use this function to trigger on key is pressed.
function isNumKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}