跟踪表单组指令中所有子输入的模糊

如何解决跟踪表单组指令中所有子输入的模糊

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

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

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

解决方法

类似的指令

@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){}
}

制造“诡计”

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

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

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