Pass the parameter name to the controller using the Change function in Angular 2

Question

Pass the parameter name to the controller using the Change function in Angular 2

When creating a string from multiple inputs, I have a requirement to include the name of the input element as the second parameter in a function.

<input [(ngModel)]="programSearched" name="programSearched"(ngModelChange)="stringBuilderOnChangeMaker(programSearched,??programSearched.name??)" </input>

I need to distinguish between different inputs triggering the same onchange action, hence passing the name of the calling input to my method is essential.

stringBuilderOnChangeMaker(value, type) {
    if (type == X) {
    ...
    } else if (type == Y) {
    ...
    }
}

One option is to send a generic value like "program" or 1 as the second parameter, but it would be more elegant and informative to pass the id or name of the element instead.

angular typescript

Answer 1

Answer №1

If you want to access the changed object, you can include the $event parameter in your change method. This will allow you to retrieve the updated object. For example, if your object has a 'name' field, your code would be structured like this:

html

(ngModelChange)="stringBuilderOnChageMaker(programSearched, $event)"

ts

stringBuilderOnChageMaker(value, event) {
    console.log(event); // see what is logged
    const name = event.name;

    if (name == X) {
    ...
    } else if (name == Y) {
    ...
    }
}

Answer 2

If you want to access the changed object, you can include the $event parameter in your change method. This will allow you to retrieve the updated object. For example, if your object has a 'name' field, your code would be structured like this:

html

(ngModelChange)="stringBuilderOnChageMaker(programSearched, $event)"

ts

stringBuilderOnChageMaker(value, event) {
    console.log(event); // see what is logged
    const name = event.name;

    if (name == X) {
    ...
    } else if (name == Y) {
    ...
    }
}

Answer 3

Answer №2

It may have been a while, but I recently encountered the same issue and found a solution. Here's how I fixed it:

Here's the HTML code snippet:

(change)="saveChange(product, $event)"

And here's the TypeScript code:

public saveChange(product, event) {

    const name = event.currentTarget.name;
    //..
}

This was tested on Angular version 7.0.6.

Answer 4

It may have been a while, but I recently encountered the same issue and found a solution. Here's how I fixed it:

Here's the HTML code snippet:

(change)="saveChange(product, $event)"

And here's the TypeScript code:

public saveChange(product, event) {

    const name = event.currentTarget.name;
    //..
}

This was tested on Angular version 7.0.6.

Pass the parameter name to the controller using the Change function in Angular 2

Answer №1

Answer №2

Similar questions

Node corrupting images during upload

NGRX effect in Nativescript Angular loses state when the app is suspended on iOS

Error: Unable to locate the specified Typescript function

Error encountered due to a circular reference in the dependency library

Set the enumeration value to a variable

Encountering an issue while constructing a JSON path in SQL using values from a column

What is the process for retrieving an element from component interaction?

What is the best way to organize information in a table based on the date

Utilize Firebase to perform a case-insensitive query

Placeholder variable not specified in radio buttons

Utilizing TypeScript Variables within a Jquery Each Iteration

Enhancing the theme using material-ui@next and typescript

What is the method for activating a button when a user inputs the correct email address or a 10-digit mobile number

Guide on setting up staticfile_buildpack header configuration for an Angular application

How can I trigger a click event with Ionic's ion-toggle and radio-group components

Trouble shooting: Angular 2 Http get request not firing

Angular's observable function is not providing a complete response

What is the best way to transfer an array to a different component?

Optimize Next.js 10 TypeScript Project by Caching MongoDb Connection in API Routes

JavaScript heap runs out of memory in Angular testing because of extensive mock data