如何通過angular 2中的事件對象獲取輸入字段名稱

Question

我不確定它是否合乎邏輯。 這是我的輸入框的 html 代碼。

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

這是我的換火功能

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

我只想在 firechange 函數中傳遞事件，在 fire change 函數中我想從事件中獲取輸入字段名稱，以便我可以了解表單中哪個輸入字段觸發了事件。 預期的代碼將是這樣的

[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(); 
          }
 }

我的理想要求是，在一個表單中有多個表單域，我什至不想在每個單獨的表單域中編寫 firechange 函數。 是否有任何通用方法可以在特定表單的每個輸入字段值更改上調用事件，而無需將其寫入每個輸入字段？

Answer 1

要獲取元素的實際名稱，您可以執行以下操作：

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

Answer 2

如果您想從火更改功能中獲取元素，您可能需要嘗試以下操作：

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

如果您還想指示您的組件在您的組件中使用單個指令將 firechange() 邏輯應用於所有輸入字段（並且不必在每個輸入字段上都指定這一點），那么我建議您查看在 Angular2 中如何知道任何表單輸入字段何時失去焦點。

我希望這會有所幫助

Answer 3

如果id與您傳遞的名稱相同，您可以獲得類似的名稱

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

Answer 4

如果id不相同或者它可以改變，這里有更多的杠桿作用......

您可能希望將[name]屬性反映到元素的屬性中：

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

然后，

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

在這里查看更多

Answer 5

試試這個：

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

Answer 6

這在 Angular 10 中對我有用

$event.source.name