跟踪 formgroup 指令内所有子输入的模糊答案

【问题标题】：Track on blur for all child inputs inside formgroup directive跟踪 formgroup 指令内所有子输入的模糊
【发布时间】：2021-06-04 01:04:57
【问题描述】：

我有一个包含一堆输入字段的 forgroup。我想为所有输入字段设置一个 onblur 事件，以将事件发送到外部分析。我不想用 onblur 标记每个输入字段，而是想在表单组上设置它。我可以使用 viewchildren 查询来遍历元素，但我希望这个功能是可重用的，所以我正在考虑创建一个指令。

我创建了一个指令并将其设置在表单组上，但显然无法使用指令查询 ViewChildren。

有没有办法创建一个查询所有输入字段的指令，然后向它们添加 n 个 onblur 侦听器？

【问题讨论】：

我认为创建一个指令并将其放在每个formControl上就可以了
不太确定这是否有效，但我认为您可以在指令的构造函数中注入ElementRef，该指令引用应用的元素，在您的情况下为表单（组）。您可以将其用于进一步查询选择输入字段。

标签： angular directive viewchild

【解决方案1】：

类似的指令

@Directive({
  selector: '[ngModel],[formControl],formControlName',
  exportAs: 'child'
})
export class BlurDirective {
  @HostListener('blur')_(){
    const value=this.control?this.control.value:null;
    const id=this.elementRef.nativeElement.getAttribute('id')
    console.log(id,value)
  }
  constructor(private elementRef:ElementRef, 
              @Optional() @Self() private control:NgControl){}
}

制造“诡计”

【讨论】：

【解决方案2】：

根据您的问题描述，我认为如果您只想添加 onBlur 事件，以便您可以捕获任何用户输入并将其发送到外部分析。

我会建议另一种方法。您可能可以订阅formGroup'svalueChanges 事件，并在每次更改或输入时将数据发送到分析服务。

this.yourForm.valueChanges.subscribe(formField => {
    // TODO call external analytics service
})

【讨论】：

这意味着每个组件中都有自定义代码。我正在寻找一个指令，以便我可以在我想要标记的输入字段上共享此代码