在 MatStepper 中进入下一步后的焦点输入 [英] Focus input after going to the next step in MatStepper

问题描述

在单击第一步的下一步"按钮后，如何以编程方式将焦点设置为地址"输入，因此在从第 1 步(填写您的姓名")到第 2 步(填写您的地址")之后.

这就是我想要实现的:

我已经在试验 MatStepper 的 selectionChange 事件，但它似乎在第 2 步可见之前被触发，所以它不起作用.

解决方案

您使用选择更改事件走在正确的道路上.查看分叉的 StackBlitz:

StackBlitz

您要做的是为您的输入元素分配一个 id ，该元素可以与步进器的选定索引关联使用，例如:

 <form [formGroup]=firstFormGroup"><ng-template matStepLabel>填写你的名字</ng-template><mat-form-field><input id="input0";matInput placeholder="Last name, First name";formControlName=firstCtrl"需要></mat-form-field><div><button mat-button matStepperNext>Next</button>

</表单></mat-step><mat-step [stepControl]=secondFormGroup"><form [formGroup]=secondFormGroup"><ng-template matStepLabel>填写您的地址</ng-template><mat-form-field><input id="input1";matInput placeholder =地址"formControlName=secondCtrl"需要></mat-form-field><div><button mat-button matStepperPrevious>返回</button><button mat-button matStepperNext>Next</button>

</表单></mat-step>

然后通过使用选择 (selectionChange) 事件，您可以在等待它在 DOM 中显示后将焦点设置在输入元素上:

导出类 StepperOverviewExample 实现 AfterViewInit {isLinear = false;firstFormGroup: 表单组；第二表单组:表单组；公共目标输入 = 'input0';构造函数(私有_formBuilder:FormBuilder){}ngOnInit() {this.firstFormGroup = this._formBuilder.group({firstCtrl: ['', Validators.required]});this.secondFormGroup = this._formBuilder.group({secondCtrl: ['', Validators.required]});}ngAfterViewInit() {this.setFocus();}私人 setFocus() {让 targetElem = document.getElementById(this.targetInput);setTimeout(函数waitTargetElem(){如果(document.body.contains(targetElem)){targetElem.focus();} 别的 {setTimeout(waitTargetElem, 100);}}, 100);}onChange(事件:任何){让 index = String(event.selectedIndex);this.targetInput = '输入' + 索引；this.setFocus();}}

How can I programmatically set focus to "Address" input after clicking "Next" button on step one, so after going form step 1 ("Fill out your name") to step 2 ("Fill out your address").

https://stackblitz.com/angular/onnbkqrydrg?file=app%2Fstepper-overview-example.ts https://material.angular.io/components/stepper/overview

This is what I want to achieve:

I was already experimenting with MatStepper's selectionChange event, but it seems that it is fired before step 2 is visible, so it doesn't work.

解决方案

You were on the right path using the selection Change event. See the forked StackBlitz:

StackBlitz

What you want to do is assign an id to your input elements that can be used in correlation with the selected index of the stepper, such as:

  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <input id="input0" matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <mat-form-field>
        <input  id="input1" matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

Then by using the selection (selectionChange) event you can set focus on the input element after waiting for it to be displayed in the DOM:

export class StepperOverviewExample implements AfterViewInit {
  isLinear = false;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  public targetInput = 'input0';

  constructor(private _formBuilder: FormBuilder) { }

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
  }

  ngAfterViewInit() {
    this.setFocus();
  }

  private setFocus() {
    let targetElem = document.getElementById(this.targetInput);
    setTimeout(function waitTargetElem() {
      if (document.body.contains(targetElem)) {
        targetElem.focus();
      } else {
        setTimeout(waitTargetElem, 100);
      }
    }, 100);
  }

  onChange(event: any) {
    let index = String(event.selectedIndex);
    this.targetInput = 'input' + index;
    this.setFocus();
  }
}

这篇关于在 MatStepper 中进入下一步后的焦点输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！