如何在 Angular 5 或更高版本中以编程方式获取 formControlName

Question

需要知道，当您在一个表单中有多个控件并且您想知道用户更改为哪个控件以便您可以执行某些操作时。

<input formControlName="item_name" #itemName (input)="inputChanged(itemName)">

为什么我需要获取 formControlName？

正如您在图像中看到的，某些字段已编辑但未确认，这就是为什么用户会看到用于验证或取消对该特定字段的操作的选项的原因。这就是为什么我需要获取formControlName输入更改的字段，以便我可以只显示该字段的选项。

我已经搜索了它的解决方案，但找不到stack-overflow这就是为什么我决定发布这个问题的答案

Answer 1

从这个输入字段得到 formControlName

<input formControlName="item_name" #itemName (input)="inputChanged(itemName)">

你只需要获取属性 formControlName

inputChanged(element: HTMLElement) {
  log(element.getAttribute('formControlName')) // item_name 
}

Answer 2

我发现的最直接的方法：

HTML：

<input formControlName="item_name" (input)="inputChanged($event)">

TS：

inputChanged(e) {
  log(e.target.getAttribute('formControlName')) // item_name 
}

无需在每个输入中添加id。$event只需作为参数传递即可。