Angular2检查表单控件之一是否处于焦点答案

【问题标题】：Angular2 check if one of the form controls is in focusAngular2检查表单控件之一是否处于焦点
【发布时间】：2018-03-03 03:43:09
【问题描述】：

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

我的问题是我什至没有找到如何检查特定表单控件的方法。

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

有什么想法吗？

【问题讨论】：

标签： angular angular2-forms

【解决方案1】：

我也有类似的需求。我也没有在表单控件中看到任何有效的属性。然后，我使用Input 或ElementRef 引用ViewChild，以获取实际的<input>。我再次发现没有可以使用的焦点属性。

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

HTML

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

isDestinationFocused: boolean;

autocompleteFocus() {
    this.isDestinationFocused = true;
}

autocompleteBlur() {    
    this.isDestinationFocused = false;
}

【讨论】：