跟踪 formgroup 指令中所有子输入的模糊

Question

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

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

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

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

使出“把戏”

Answer 2

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

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

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

跟踪 formgroup 指令中所有子输入的模糊

Track on blur for all child inputs inside formgroup directive

angular

directive

viewchild