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;
}