按下角步进键

Question

我的应用程序在输入键上按下我想在第二个步进器上抛出步进器1形式。我不能在第二个步进器上输入键按下步进器1形式。我的问题-如何访问EventListner keyUp或Keydown以访问下一步?我是一个新手，有谁能帮帮我吗?

<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Step 1</ng-template>
<div class="row">
<div class="col-xl-1"></div>
<div class="col-xl-6">
<div class="row">
<div class="row">
<div class="col-xl-12">
<div class="form-group">
<label for="inputFirstName">Full Name <span style="color:red;">*</span>
</label>
<input type="text" class="form-control" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)" name="fname" id="inputFirstName" formControlName="firstNameCtrl"
(change)="ChangeStudentNamePop()"
[ngClass]="{'form-control-danger': firstFormGroup.controls.firstNameCtrl.invalid && (firstFormGroup.controls.firstNameCtrl.dirty || firstFormGroup.controls.firstNameCtrl.touched)}"
placeholder="Full Name" autocomplete="given-name" autofocus required>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6">
<div class="form-group">
<label for="inputFatherName">Father's Name <span style="color:red;">*</span>
</label>
<input type="text" class="form-control" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)" name="fatherName" id="inputFatherName" formControlName="fatherNameCtrl"
[ngClass]="{'form-control-danger': firstFormGroup.controls.fatherNameCtrl.invalid && (firstFormGroup.controls.fatherNameCtrl.dirty || firstFormGroup.controls.fatherNameCtrl.touched)}"
placeholder="Father's Name" autocomplete="father-name" autofocus required>
</div>
</div>
<div class="col-xl-4" id="top_help">
<p style="font-size: 150%"><b>Need Help?</b></p>
<img class="videoimg"  src="https://dte.admissiondesk.org/api/front_assets/img/PLAY.png" data-toggle="modal" data-width="640" data-height="360" data-target="#myModal" data-video-fullscreen=""  (click)="videoPopup(1)">
<br>
<h5>Email Us on <a style="color:#0054ff">info</a></h5>
</div>
</div>
<br>
<br>
<div class="slideControl">
<div class="SlideshowRight">
<a class="slideControlButton"  *ngIf="firstFormGroup.valid == true" (click)="radioChange();">
<mat-icon >arrow_forward</mat-icon>
</a>
</div>
</div>
</form>
</mat-step>
//Second Stepper :
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
//Code year.
<mat-step>

radioChange(event) {
if(event){
if(event=='Male'){
this.initials_gender = "Mr.";
}else if(event=='Female'){
this.initials_gender = "Ms.";
}else if(event=='Transgender'){
this.initials_gender = "";
}
this.secondFormGroup.patchValue({
genderCtrl : event
})
}
this.stepper.next();
}

Answer 1

您可以使用@HostListener

@HostListener('window:keyup', ['$event'])
keyEvent(event: KeyboardEvent) {
if (event.keyCode === LEFT_ARROW) {
// write your code
}
if (event.keyCode === RIGHT_ARROW) {
// write your code
}
if (event.keyCode === ENTER) {
// write your code
}
}