Angular2检查其中一个表单控件是否处于焦点

Question

在Angular2应用程序中，我有一个表单（“FormGroup”）。

表格上有几个表格。

this.mainForm = this.fb.group({
       firstPart:this.firstForm,
       secondPart:this.secondForm,
       thirdPart:this.thirdForm
       ....
});

我的要求是，在我的代码中的某个地方，我需要检查一个表单（不是主表单，而是一些内部表单）是否是焦点。

其实我需要这样的东西：

isFormInFocus(formName) {
   let innerForm = this.mainForm.controls[formName];
   //NOT EXIST - I need something like this...
   return innerForm.focus;
}

我的问题是我找不到如何检查这个甚至是特定的表单控件。

如果我知道这一点，我可以作为一种解决方法，循环内部表单中的所有表单控件，并检查其中一个是否处于焦点...

有任何想法吗？

Answer 1

我有类似的需求。我没有看到表单控件中的任何有效属性。然后我用ViewChild或Input引入了ElementRef参考，以获得我的情况下的实际<input>。我再次找不到可以使用的焦点属性。

所以，不幸的是，我自己一直在跟踪焦点状态（看起来很疯狂）。它运作良好，似乎有点矫枉过正。

HTML

<input md-no-float placeholder="City or Zip" type="text" matInput formControlName="destination" (focus)="autocompleteFocus()" (blur)="autocompleteBlur()">

TS

isDestinationFocused: boolean;

autocompleteFocus() {
    this.isDestinationFocused = true;
}

autocompleteBlur() {    
    this.isDestinationFocused = false;
}