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

时间:2017-12-03 12:10:10

标签: angular angular2-forms

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

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

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

任何想法?

1 个答案:

答案 0 :(得分:2)

我有类似的需求。我没有看到表单控件中的任何有效属性。然后我使用ViewChildInput提取了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;
}