Angular 2 在組件加載時將焦點設置在表單的第一個字段上

Question

在我的應用程序中，我想在組件加載時自動將焦點設置在表單的第一個字段上。 任何人都可以指導如何在沒有任何重復的情況下實現這一點，因為我希望在我的應用程序中的每個表單（反應式表單）上都有這個。

Answer 1

你可以通過簡單地將“autofocus”屬性添加到你的輸入元素來實現這一點。

<input class="form-control" [formControl]="name" autofocus>

Answer 2

您應該使用指令來實現此行為。

這將告訴你如何做到這一點： https ： //plnkr.co/edit/ttxCP7vCLkLtNb3Xiaah？p = preview

import {Component, NgModule, Directive, ElementRef, Renderer} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Directive({
  selector: 'form[anyNameHere]'
})
export class SelectFirstInputDirective {

  constructor(private _eRef: ElementRef, private _renderer : Renderer) { }

  private _getInputElement(nativeElement: any): any {
    if (!nativeElement || !nativeElement.children) return undefined;
    if (!nativeElement.children.length && nativeElement.localName === 'input' && !nativeElement.hidden) return nativeElement;

    let input;

    [].slice.call(nativeElement.children).every(c => {
      input = this._getInputElement(c);
      if (input) return false; // break
      return true; // continue!
    });

    return input;
  }

  ngAfterViewInit() {
    let formChildren = [].slice.call(this._eRef.nativeElement.children);

    formChildren.every(child => {
      let input = this._getInputElement(child);

      if (input) {
        this._renderer.invokeElementMethod(input, 'focus', []);
        return false; // break!
      }

      return true; // continue!
    });
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <form anyNameHere>
        <div class="form-group">
            <input hidden formcontrolname="firstName" type="text" class="form-control input-sm ng-pristine ng-valid ng-touched" placeholder="First Name" id="firstName">
            <label class="col-sm-3 control-label" for="firstName">Name</label>
            <div class="col-sm-9 form-inline">
              <div class="form-group">
                <div class="col-sm-12">
                  <input formcontrolname="firstName" type="text" class="form-control input-sm ng-pristine ng-valid ng-touched" placeholder="First Name" id="firstName">
                </div>
              </div>

              <div class="form-group">
                <div class="col-sm-12">
                  <input formcontrolname="lastName" type="text" class="form-control input-sm ng-untouched ng-pristine ng-valid" placeholder="Last Name" id="lastName">
                </div>
              </div>
            </div>
        </div>
      </form>
    </div>
  `,
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, SelectFirstInputDirective ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 3

使用Angular 4時，Renderer已被棄用，因此指令方式已經消失。 但無論如何你總是可以使用“快速和骯臟”的方式：添加對你想要設置焦點的元素的引用，並只使用<reference-name>.focus()

<form [formGroup]="form" (ngSubmit)="onSubmit(form, $event); needFocus.focus()">
  <input placeholder="" formControlName="name" #needFocus>
</form>

Answer 4

HTML 自動聚焦屬性就是這樣做的

<input type="text" name="fname" autofocus>

Answer 5

以下方法可以使用=> 1.您可以通過autoFoucs指令執行此操作或2.提供對您的控件的引用

 <input hidden #firstName formcontrolname="firstName" type="text" class="form-control input-sm ng-pristine ng-valid ng-touched" placeholder="First Name" id="firstName">

然后在ts文件中聲明如下

export class App implements OnInit{
 @ViewChild('firstName') firstNameTextbox;
  constructor() {    
  }
ngOnInit() {
this.firstNameTextbox.nativeElement.focus();
}
}

Answer 6

import { AfterViewInit, Directive, ElementRef } from '@angular/core';

@Directive({
  selector: 'form[appFocusFirstInput]'
})
export class FocusFirstInputDirective implements AfterViewInit {

  constructor(
    private element: ElementRef
  ) {
  }

  ngAfterViewInit(): void {
    const input = this.element.nativeElement.querySelector('input');
    if (input) {
      input.focus();
    }
  }
}