javascript - how to get input field name through event object in angular 2 - Stack Overflow

admin管理员组

文章数量:1344678

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?

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?

• javascript
• angularjs
• events
• angular

Share Improve this question Follow asked May 5, 2016 at 1:14 MD ABDULLAH AL KAFIMD ABDULLAH AL KAFI 25322 gold badges33 silver badges99 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 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')
}

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){
}

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 ponent to apply the firechange() logic on all of your input fields with one single instruction in your ponent (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

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

Try this:

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

This worked for me in Angular 10

$event.source.name

本文标签： javascripthow to get input field name through event object in angular 2Stack Overflow