在进入MatStepper的下一步之后,集中输入 [英] Focus input after going to the next step in MatStepper
问题描述
在第一步中单击下一步"按钮后,如何以编程方式将焦点设置为地址"输入,因此从步骤1(填写您的姓名")转到步骤2(填写您的地址")之后.
这是我想要实现的:
我已经在尝试MatStepper的selectionChange事件,但是似乎它在第2步可见之前就被触发了,所以它不起作用.
您使用选择Change事件在正确的路径上.请参阅分叉的StackBlitz:
您要做的是为您的输入元素分配一个 id
,该元素可以与步进器的选定索引相关联地使用,例如:
< mat-step [stepControl] ="firstFormGroup">< form [formGroup] ="firstFormGroup">< ng-template matStepLabel>填写您的姓名</ng-template>< mat-form-field>< input id ="input0" matInput占位符=姓氏,名字" formControlName ="firstCtrl"是必需的></mat-form-field>< div><按钮垫-按钮垫StepStepNext>下一步</button></div></form></mat-step>< mat-step [stepControl] ="secondFormGroup">< form [formGroup] ="secondFormGroup">< ng-template matStepLabel>填写您的地址</ng-template>< mat-form-field>< input id ="input1" matInput placeholder ="Address" formControlName ="secondCtrl" required></mat-form-field>< div><按钮垫-按钮matStepperPrevious>后退</button><按钮垫-按钮垫StepStepNext>下一步</button></div></form></mat-step>
然后,通过使用selection(selectionChange)事件,您可以在等待输入元素在DOM中显示后将焦点设置在该输入元素上:
导出类StepperOverviewExample实现AfterViewInit {isLinear = false;firstFormGroup:FormGroup;secondFormGroup:FormGroup;public targetInput ='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(function waitTargetElem(){如果(document.body.contains(targetElem)){targetElem.focus();} 别的 {setTimeout(waitTargetElem,100);}},100);}onChange(event:any){让索引=字符串(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:
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屋!