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

6 Answers 6

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