Is there a way to implement a textbox in Aurelia using Typescript that restricts input to only numbers?

I'm looking to create a textbox that only accepts numbers using bindable property instead of oninput. Could someone provide guidance on how to achieve this?

textbox.html

<template bindable="">
  <input style="
         box-sizing: border-box;"
         maxlength="10" ;
         oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
</template>;   

textbox.ts

import { bindable } from 'aurelia-framework';
export class textbox {
  constructor() {
  }
}

app.html

<template bindable="">
  <require from="./components/textbox.html"></require>
  <textbox></textbox>
</template>

app.ts

export class App {
}

Answer №1

Here is a helpful concept to consider:

For HTML, you can utilize the  
(keyup)="methodName($event.targer.value)"  event.


In your TypeScript file, you can incorporate:
bindedTextareaProperty;

methodName(event) {
if(isNumber(event){

} else {
// here you could access the value of the last index
bindedTextareaProperty.slice(0, bindedTextareaProperty.length -1);
}
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Custom attributes given to Stencil web components in Vite/Vue3 will not trigger any reactions

Short backstory I initially set up my project with a vue-cli environment using Vue 2 and options-api. Recently, I decided to transition to create-vue, which is based on Vite with Vue 3 and Typescript. To incorporate web components from Stencil into my pro ...

Steps for setting up a Subscription instanceWould you like me to

I am currently utilizing a Subscription in Angular to extract a parameter from the route. Below is the code snippet: import { Component, OnInit, OnDestroy } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import ...

Are Typescript generics that use "extends object" unnecessary? How should this be approached for best practices?

In my observations, using the <P extends object> generic in JavaScript is often deemed pointless since virtually everything in the language is an object. Most literals behave like objects with methods such as .toString, and strings are objects with p ...

Different Categories of Array Deconstruction

While iterating through an array, I am utilizing destructuring. const newArr = arr.map(({name, age}) => `${name} ${age}`) An error occurs in the above code stating: Binding element 'name' implicitly has an 'any' type To resolve th ...

Tips for including type definitions when adding elements to an array in TypeScript

Having trouble avoiding the use of 'any' as the type definition when pushing elements into an array? I attempted to specify the type but encountered an error. Here is a snippet of the code: interface answerProps { state: string; answer: s ...

Guide to sending jQuery data back to main class in TypeScript

Hi everyone, I'm diving into the world of typescript and JQuery. I have a simple question. In my typescript class called DatePicker, I am calling a function. Here's a snippet of the code: Class DatePicker { private pickerData; public update( ...

The Typescript interface requires that one prop representing a number is expected to be less than another number prop

Is there a way to create a TypeScript interface that enforces a condition where a number property must always be less than another number property in the interface? For instance, if I have a numberOfFiles property and a currentFileIndex property, and I wa ...

Applying a Typescript Generic to enhance the functionality of the API fetcher

I've written a simple function to enhance fetch functionality. I am currently exploring how TypeScript Generics can be utilized to define the Type for 'data' in the return. const apiFetchData = async ( url: string, options = {}, ): P ...

Checking for validation in the datePicker input field

I have a textbox field labeled "Expires on" and I am currently utilizing the DatePicker feature. $("#sfExpiresOn").datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, changeYear: true, ...

Issue in Angular Material: The export 'MaterialComponents' could not be located in './material/material.module'

I'm relatively new to Angular and I am encountering some difficulties when trying to export a material module. The error message that appears is as follows: (Failed to compile.) ./src/app/app.module.ts 17:12-30 "export 'MaterialComponents&ap ...

Updating nested forms in Angular 4

The nested form structure I am working with is a 'triple level' setup: FormGroup->ArrayOfFormGroups->FormGroup At the top level (myForm): this.fb.group({ name: '', description: '', q ...

The hyperlink within the Angular component seems to be unresponsive and is difficult to click on

I attempted to click on the user's profile link, but nothing happens. It seems impossible to interact with it. Here is the code snippet: JavaScript ViewUserProfile(user) { this.router.navigate([user.username]); if (this.currentUser.usernam ...

Incorporate an interface into a Typescript class to enhance its functionality

Is there a way to extend a class with the properties of an interface in Typescript while keeping those properties uninitialized? My ultimate goal is to minimize code redundancy by centralizing property declarations within an interface rather than duplicati ...

The boolean type in TypeScript is throwing an error because it does not have any call

Currently, I am grappling with an issue in my Typescript and React Native project. The error message displayed on the console reads: "This expression is not callable. Type 'Boolean' has no call signatures." My code consists of a simple home page ...

Retrieve the variable only once a response has been received from the POST request

Is there a way to update a variable in my component only after receiving a response from a POST request? Here is the code in component.ts: formSubmit() { this.sent = this.submitProvider.sendByPost(this.form); this.formSent = this.submitProvider.f ...

Using an Angular string enum as a parameter - a guide on how to correctly reference it in

I have defined a string enum and a method within my component: export enum Language { de = 'de', en = 'en' } setLang(lang: Language.en | Language.de) { const current = Language[lang] } Next, I want to invoke this method i ...

New Entry failing to appear in table after new record is inserted in CRUD Angular application

Working with Angular 13, I developed a basic CRUD application for managing employee data. Upon submitting new information, the createEmployee() service is executed and the data is displayed in the console. However, sometimes the newly created entry does no ...

Expressjs - Error: Headers already sent to the client and cannot be set

After testing various solutions from others, I am still unable to resolve this error. My objective is to iterate through each item in the array sourced below: novel.ts export let indexList = (req: Request, res: Response) => { novel.getAllDocuments ...

Guide on successfully importing a pretrained model in Angular using TensorFlow.js

I need help with uploading a pretrained Keras model to my existing tensorflow.js model and then making simple predictions by passing tensors in the correct format. The model is stored locally within the project, in the assets folder. export class MotionAn ...

Ways to achieve the organization of nested promises in Angular 9

I am facing an issue with the order of asynchronous calls in my Angular script. Despite having multiple nested async calls, the order of execution seems to be disrupted. Here is a snippet of my Angular code: saveArticles(articles, action) { articles.f ...