.focus() method on FormControl or access to native HTML element

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior There seems to be no way to focus a FormControl.

Expected behavior FormControl provides a .focus() instance method, or access to the native HTML element.

What is the motivation / use case for changing the behavior? To give input focus to a control when it is invalid, as in the following example:

if (!this.form.valid) {
  let invalid = <FormControl[]>Object.keys(this.form.controls).map(key => this.form.controls[key]).filter(ctl => ctl.invalid);
  if (invalid.length > 0) {
    // Give input focus to invalid[0]... how?
  }
  return false;
}

Please tell us about your environment:

• Angular version: 2.2.1

• Browser: N/A

• Language: TypeScript 2.0.3

[JunusErgin]

As long, as Angular doesn’t provide this functionality, i manually added it:

Add the following code over your component:

const originFormControlNgOnChanges = FormControlDirective.prototype.ngOnChanges;
FormControlDirective.prototype.ngOnChanges = function () {
    this.form.nativeElement = this.valueAccessor._elementRef.nativeElement;
    return originFormControlNgOnChanges.apply(this, arguments);
};

const originFormControlNameNgOnChanges = FormControlName.prototype.ngOnChanges;
FormControlName.prototype.ngOnChanges = function () {
    const result = originFormControlNameNgOnChanges.apply(this, arguments);
    this.control.nativeElement = this.valueAccessor._elementRef.nativeElement;
    return result;
};

Now you can just implement it your way:

if (!this.form.valid) {
  let invalid = <FormControl[]>Object.keys(this.form.controls).map(key => this.form.controls[key]).filter(ctl => ctl.invalid);
  if (invalid.length > 0) {
     invalid[0].nativeElement.focus();
  }
  return false;
}

In my case, it worked out of the box. However, Typescript complained because it doesn’t know nativeElement. So i did it the following way:

        if (invalid.length > 0) {
            let invalidElem: any = invalid[0];
            invalidElem.nativeElement.focus();
        }

I hope that I could help someone 😉

[pcroc]

Hi @kara I see #12463 was closed because “a relatively straightforward API already exists”.

Please can you show how I could give focus to an invalid form control? Thanks.