Angular 2将焦点设置在组件加载的第一个表单字段上

前端之家收集整理的这篇文章主要介绍了Angular 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 {}
原文链接:https://www.f2er.com/angularjs/141532.html

猜你在找的Angularjs相关文章