如何通过角度2中的事件对象获取输入字段名称

Question

我不确定它是否符合逻辑。 这是我的输入框的html代码。

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

这是我的firechange函数

 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

这在 Angular 10 中对我有用

$event.source.name

Answer 2

试试这个：

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

Answer 3

如果id 不一样或者可以改变，这里有更多的筹码...

您可能希望将[name] 属性反映到元素的属性：

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

那么，

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

See more here

Answer 4

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

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

Answer 5

如果id 与您传递的名称相同，您可以获得类似的名称

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

Answer 6

如果你想从你的火变化函数中获取元素，你可能想尝试类似的东西：

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

如果您还想指示您的组件在您的组件中使用一条指令在所有输入字段上应用 firechange() 逻辑（并且不必在每个输入字段上都指定），而不是我建议您看看in Angular2 how to know when ANY form input field lost focus。

希望对你有帮助