如何通过事件对象我输入字段的名字吗

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){
          let theElement = event.target;
          // now theElement holds the html element which you can query for name, value and so on
 }

此外，如果您希望通过组件中的一条指令（而不必在每个输入字段上指定），指示组件在所有输入字段上应用firechange（）逻辑，我建议您在Angular2中了解如何知道任何表单输入字段何时失去焦点。

我希望这有助于

Answer 2

如果< code>id与您传递的名称相同，您可以获得如下名称

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

Answer 3

要获取元素的实际名称，可以执行以下操作：

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