Блог

Я в своем приложении при нажатии клавиши Enter хочу запустить форму Stepper 1 на втором шаге. Я не могу запустить форму stepper 1 на втором шаге при нажатии клавиши enter. Мой вопрос — Как получить доступ к ключу EventListner или Keydown для доступа к следующему шагу в stepper? Я новичок в angular, может ли кто-нибудь помочь мне в этом году.

   lt;mat-step [stepControl]="firstFormGroup"gt;  lt;form [formGroup]="firstFormGroup"gt;  lt;ng-template matStepLabelgt;Step 1lt;/ng-templategt;  lt;div class="row"gt;  lt;div class="col-xl-1"gt;lt;/divgt;  lt;div class="col-xl-6"gt;  lt;div class="row"gt;  lt;div class="row"gt;  lt;div class="col-xl-12"gt;  lt;div class="form-group"gt;  lt;label for="inputFirstName"gt;Full Name lt;span style="color:red;"gt;*lt;/spangt;  lt;/labelgt;  lt;input type="text" class="form-control" onkeypress="return (event.charCode gt; 64 amp;amp; event.charCode lt; 91) || (event.charCode gt; 96 amp;amp; event.charCode lt; 123) || (event.charCode==32)" name="fname" id="inputFirstName" formControlName="firstNameCtrl"  (change)="ChangeStudentNamePop()"  [ngClass]="{'form-control-danger': firstFormGroup.controls.firstNameCtrl.invalid amp;amp; (firstFormGroup.controls.firstNameCtrl.dirty || firstFormGroup.controls.firstNameCtrl.touched)}"  placeholder="Full Name" autocomplete="given-name" autofocus requiredgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="row"gt;  lt;div class="col-xl-6"gt;  lt;div class="form-group"gt;  lt;label for="inputFatherName"gt;Father's Name lt;span style="color:red;"gt;*lt;/spangt;  lt;/labelgt;  lt;input type="text" class="form-control" onkeypress="return (event.charCode gt; 64 amp;amp; event.charCode lt; 91) || (event.charCode gt; 96 amp;amp; event.charCode lt; 123) || (event.charCode==32)" name="fatherName" id="inputFatherName" formControlName="fatherNameCtrl"  [ngClass]="{'form-control-danger': firstFormGroup.controls.fatherNameCtrl.invalid amp;amp; (firstFormGroup.controls.fatherNameCtrl.dirty || firstFormGroup.controls.fatherNameCtrl.touched)}"  placeholder="Father's Name" autocomplete="father-name" autofocus requiredgt;  lt;/divgt;  lt;/divgt;  lt;div class="col-xl-4" id="top_help"gt;  lt;p style="font-size: 150%"gt;lt;bgt;Need Help?lt;/bgt;lt;/pgt;  lt;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)"gt;  lt;brgt;  lt;h5gt;Email Us on lt;a style="color:#0054ff"gt;infolt;/agt;lt;/h5gt;  lt;/divgt;  lt;/divgt;  lt;brgt;  lt;brgt;  lt;div class="slideControl"gt;  lt;div class="SlideshowRight"gt;  lt;a class="slideControlButton" *ngIf="firstFormGroup.valid == true" (click)="radioChange();"gt;  lt;mat-icon gt;arrow_forwardlt;/mat-icongt;  lt;/agt;  lt;/divgt;  lt;/divgt;  lt;/formgt;  lt;/mat-stepgt;   //Second Stepper :  lt;mat-step [stepControl]="secondFormGroup"gt;  lt;form [formGroup]="secondFormGroup"gt;  //Code year.  lt;mat-stepgt;    

   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();  }   

Вы можете использовать @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  }  }