Using TypeScript to pass the text field ID to a function for clearing the text field with a button

I am looking for a way to improve the functionality of my web page featuring several buttons that will clear different text boxes on the same line. Currently, I am using separate functions for each button, but my goal is to streamline this process by utilizing a single function that can be customized through passing in the text field ID.

Here is an example of what I have now in HTML: 

<div class="col-sm-4">
     <input type="text" class="form-control" id="textField1" formControlName="textField1" />
</div>
      <button class="btn btn-danger" (click)="clearTextField('textField1')"><i class="fa fa-times"></i></button>

As shown above, I have a specific function for each text field like "clearTextField1()". Is there a way to achieve the desired outcome with just one function and dynamically pass in the text field ID when needed?

angulartypescript

Answer №1

To make it work, simply include the formcontrolname in the click functions.

  <button class="btn btn-danger" (click)="clearTextField1('textField1')"><i class="fa fa-times"></i></button>

Here is the function that should be used:

clearTextField1(field:String): void {
    return this.form.controls[field].setValue('');
}

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

The Karma tool is throwing a TypeError because it is unable to access the 'length' property of a null value

Despite reviewing numerous inquiries regarding this error, none have provided insight into identifying the root cause of the issue. How can I pinpoint the origin of this error and what steps can I take to resolve it? TypeError: Cannot read property ' ...

angulartypescriptkarma-jasminekarma-runnerangular6

Angular 2- Custom input forms sourced from various components for enhanced user experience

I am currently working on creating an angular 2 form using template-driven and I want to reuse a custom input that I have created. My main component structure looks like this: <form (ngSubmit)="onSubmit(f.value)" #f="ngForm"> <custom-in ...

angularangular2-forms

Alter the color scheme of the material dialog's background

I have been trying to change the background color of a dialog, but so far I have only been successful in changing the outline. I used the panelClass property as I believed it was the correct way to do it. https://stackblitz.com/edit/jm9gob ...

angulartypescriptangular-material

What is the best way to ensure that Interface (or type) Properties always begin with a particular character?

I attempted to tackle this assignment using template literals, but unfortunately, I wasn't successful. Here is the interface that I am working with: interface SomeInterface { '@prop1': string; '@prop2': string; '@ ...

typescript

Unable to update a single object within an array using the spread operator

I am currently working on updating an object within an array and have encountered some issues. In my initial code, I successfully updated a specific property of the object inside the array like this: var equipment = this.equipments.find((e) => e.id === ...

javascriptangulartypescript

`How to cleverly fake dependencies with symbols in Jest, Vue3, and Typescript?`

I am faced with the following scenario: // symbols.ts - Injection Key defined as a Symbol export const FAQ_SERVICE: InjectionKey<FAQService> = Symbol('FAQService'); // main.ts - globally provides a service using the injection key app.provi ...

typescriptvue.jsjestjsvuejs3vue-test-utils

Learn how to toggle a specific div by clicking on an image generated from an ngFor loop in Angular version 11

One issue I am facing is that I have multiple sections containing image info and details. When I click on a specific image, the corresponding details should toggle. Everything works fine, however, if I click on another image without closing the previous ...

javascripthtmlangular

Transferring information between a pair of input fields using ngModel

There are two input fields named input1 and input2. An event has been created where anything typed in input1 is displayed in input2. However, if something is manually changed or typed into input2, the event should not trigger. I think I may need to use a ...

javascriptangular

The TypeScript error TS7006 is indicating that the parameter '_' is assumed to have an undefined type

In my Angular application, I have a class that implements ControlValueAccessor from the '@angular/forms' library: export abstract class CustomControl implements ControlValueAccessor { private _value: any = ''; private onChange ...

angularangular-reactive-formsangular-formscontrolvalueaccessor

Experimenting with PIXI.js and Jest within a React Single Page Application

I am currently working on a react application that utilizes PIXI.js and @inlet/react-pixi for animations. During testing with Jest, I encountered the following errors: Error: Uncaught [TypeError: Cannot read properties of null (reading 'stage' ...

reactjstypescriptjestjsreact-testing-librarypixi.js

Tips for navigating to a specific row within a designated page using the Angular Material table

Utilizing angular material, I have set up a table with pagination for displaying data. When a user clicks on a row, they are redirected to another page. To return to the table page, they must click on a button. The issue arises when the user needs to retu ...

javascriptangulartypescriptangular-material

Generate multiple instances of an HTML element by using ngFor and referencing an object property

In my Angular project, I am generating a unique object called starStructure based on the vote_average of each item. Here is an example of what my object array looks like: [ {"title":"Solo: A Star Wars Story", "vote_average":7.1, "starStructure":{" ...

angular

Angular Material's input field is not correctly binding to localeString

I'm currently utilizing Angular Material 11.2, and I have a specific need to convert the inputted string into US dollars format. My attempts so far include: <input matInput formControlName="test" (onkeyup)="onKeyUpTest($event)" ...

javascriptangulartypescriptangular-materialangular11

Angular is encountering a CORS issue with the "No Access-Control-Allow-Origin" error when trying to access a CSS file

Currently, in my Angular 5 application with a Web API back-end, my main goal is to reference a CSS file on a production server. I'm facing a cross-origin issue when trying to access the CSS file hosted on the IIS server website. Even though CORS is e ...

cssangularcross-domainaccess-control

The generic parameter is extending a type but is being used in a contravariant position, causing TypeScript to struggle to unify it

When developing my functions, I aim to provide flexibility for consumers to use a wider type. However, I encounter issues when the type is used in a contravariant position and TypeScript raises complaints. Here is the simplified code snippet: function wra ...

typescript

Incorporating Highcharts JS into a mobile app for a seamless data

After deciding to create an Android application that mirrors some features of a webpage, such as weather meteograms built with Highcharts, I delved into the process. Considering my use of Angular 2, I thought utilizing Angular 2 + NativeScript would be th ...

androidhighchartsangularnativescript

Experience the enhanced Angular Material 10 Date Range Picker featuring the exclusive matDatepickerFilter functionality

Is it possible to use Angular Material 10 MatDateRangeInput with matDatepickerFilter? When attempting the following: <mat-form-field appearance="outline"> <mat-label>Label</mat-label> <mat-date-range-input [formGroup]=&q ...

angularangular-material

Pattern Matching for Excluding Multiple Specific Phrases

I need to restrict what a user can enter into a field based on previous entries that are already in the system. For instance, the user has already entered these values into the database: ["typescript", "C#", "python"] If they type one of these existing ...

regexangulartypescript

PIXI.js fails to optimize image loading and loads the same image multiple times when a base URL is used

I'm in the process of developing a game using PIXI.js that will be accessed through URL X but loaded on another website at URL Y. To make this possible, I've implemented an environment variable called BASE_URL. This variable is set to '&apo ...

typescriptpixi.jsparceljs

Display a message stating "No data available" using HighCharts Angular when the data series is empty

My Angular app utilizes Highchart for data visualization. One of the requirements is to display a message within the Highchart if the API returns an empty data set. I attempted a solution, but unfortunately, the message does not appear in the Highchart a ...

javascriptangularhighcharts