how to get input field name through event object in angular 2

Question

I am not sure whether its logical to get. Here is the html code for my input box.

<input type="text" id="name" #name="ngForm" [ngFormControl]="userProfileForm.controls['name']"  
             [(ngModel)]="loggedUserInfo.name" (change)="firechange($event,'name')"
             />

and here is my firechange function

 firechange($event, field){
      if(this.userProfileForm.controls[field].valid){
       this._userService.updateUserProfile(this.loggedUserInfo);
       this._userService.loadUserData(); 
      }
 }

I want to pass only the event in the firechange function and inside the fire change function I want to get the input field name from the event so that I can understand that which input field in my form triggered the event. Expected code will be something like that

[ngFormControl]="userProfileForm.controls['name']"  
                 [(ngModel)]="loggedUserInfo.name" (change)="firechange($event)"
                 />

firechange($event){
          if(this.userProfileForm.controls[$event.fieldname].valid){
           this._userService.updateUserProfile(this.loggedUserInfo);
           this._userService.loadUserData(); 
          }
 }

My ideal requirement is, in a form there are number of form fields, I don't even want to write firechange function in each individual form field. Is there any generic way to call the event on each input field value change for a particular form without writing it on each input field?

score 3 · Answer 1 · answered Jun 12 '17 at 09:11

3

To get the actual name of the element you can do the following:

firechange(event){
     var name = event.target.attributes.getNamedItem('ng-reflect-name').value;
     console.log('name')
}

answered Jun 12 '17 at 09:11

Chris Stubbs

358
2
10

That's handy -- proprietary, but handy. Thanks! – Cody Sep 05 '17 at 21:54

score 1 · Answer 2 · edited May 23 '17 at 12:09

1

If you want to get hold of the element from within your fire change function you may want to try something like:

firechange(event){
          let theElement = event.target;
          // now theElement holds the html element which you can query for name, value and so on
 }

If you in addition you want to instruct your component to apply the firechange() logic on all of your input fields with one single instruction in your component (and not having to specify this on every single input field) than I suggest you to look at in Angular2 how to know when ANY form input field lost focus.

I hope this helps

edited May 23 '17 at 12:09

Community

1
1

answered May 05 '16 at 06:23

Picci

16,775
13
70
113

i tried with this but it prints the this ` ` that is not my purpose, i want to have the id or ngControl name of the input field. – MD ABDULLAH AL KAFI May 05 '16 at 08:52

score 1 · Accepted Answer · answered May 05 '16 at 09:46

1

If the id is the same as the name you are passing you can get the name like

firechange(event){
  if(this.userProfileForm.controls[$event.target.id].valid){
}

answered May 05 '16 at 09:46

Günter Zöchbauer

623,577
216
2,003
1,567

can you please provide a handy solution for my last paragraph? – MD ABDULLAH AL KAFI May 05 '16 at 11:09
Not sure what you're actually trying to accomplish. Maybe `this.userProfileForm.valueChanges.subscribe(...`) is what you are looking for. See also http://stackoverflow.com/a/34616143/217408 – Günter Zöchbauer May 05 '16 at 11:18

score 0 · Answer 4 · answered Sep 05 '17 at 22:13

If `id` is not the same or it can change, here's more leverage...

You may want to reflect the [name] property the the element's attribute:

... #input [name]="item.name" [attr.name]="item.name" (change)="fn(input)" ...

Then,

...
fn(input) {
    log(input.name);  // now it returns the name
}
...

See more here

score 0 · Answer 5 · edited Aug 28 '18 at 06:29

0

Try this:

<input type="text" (change)="firechange($event.target.value)">

edited Aug 28 '18 at 06:29

tripleee

175,061
34
275
318

answered Aug 28 '18 at 06:23

Raf

1
1

score 0 · Answer 6 · answered Oct 15 '20 at 02:47

0

This worked for me in Angular 10

$event.source.name

answered Oct 15 '20 at 02:47

Jorge Mario Vidal Gutiérrez

21
1

I had to use `event.source.ngControl.name` – Pablo Oct 27 '20 at 10:24

how to get input field name through event object in angular 2

6 Answers6

If id is not the same or it can change, here's more leverage...

If `id` is not the same or it can change, here's more leverage...