Angular2 check if one of the form controls is in focus

Question

In Angular2 app, I have a form ("FormGroup").

The form has a few forms on it.

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

My requirment is, in some place in my code I need to check if a form (not the main form, but some of the inner forms) is in focus.

Actually I need something like this.:

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

My issue is I don't find how to check this even to a specific form control.

if I will know this, I can, as a workaround, loop all form controls in the inner form and check if one of them is in focus...

Any Ideas?

Answer 1

I had a similar need. I didn't see any valid properties off the form control either. I then pulled in a ViewChild reference with an Input or ElementRef to get the actual <input> in my case. Again I found no property for focus that I could use.

So, unfortunately I was left keeping track of the focus state myself (which seems crazy). It works well, just seems like overkill.

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