[英]Angular Material(7.3.7) stepper without expanding the first step
[英]Return to the first step of a stepper angular material
首先向整個社區問好,我是 angular 的初學者,這是我的第一條消息。
我遇到以下問題:
我有一個帶有兩個字段的步進器。 整體步進
當我驗證第二個字段時,我想回到 step1 並啟用焦點,如下所示:
這是我的代碼:
打字稿:
export class ZoneUtilityComponent implements OnInit, AfterViewInit {
isLinear = true;
refFormGroup: FormGroup;
secondFormGroup: FormGroup;
targetInput='input0';
displayErrorSnackbar: number = 2;
refBarCodePattern = "[0-9]{6}";
stepperOrientation: Observable<StepperOrientation>;
constructor(
private formBuilder: FormBuilder,
breakpointObserver: BreakpointObserver,
private snackBar: MatSnackBar,
private rayonService: SharedRayonService
) {
this.stepperOrientation = breakpointObserver.observe('(min-width: 800px)')
.pipe(map(({matches}) => matches ? 'horizontal' : 'vertical'));
}
ngOnInit() {
this.initRefForm();
}
onChange(event: any) {
console.log("changement activé")
let index = String(event.selectedIndex);
this.targetInput = 'input' + index;
this.setFocus();
}
ngAfterViewInit() {
this.setFocus();
}
setFocus() {
console.log("setfocus")
let targetElem = document.getElementById(this.targetInput);
setTimeout(function waitTargetElem() {
if (document.body.contains(targetElem)) {
targetElem.focus();
} else {
setTimeout(waitTargetElem, 100);
}
}, 100);
}
initRefForm() {
this.refFormGroup = this.formBuilder.group({
reference: ['', [Validators.required, Validators.pattern(this.refBarCodePattern)]]
});
this.secondFormGroup = this.formBuilder.group({
secondCtrl: ['', Validators.required]
});
this.onMenu();
}
onCheckRef() {
if (this.refFormGroup.get('reference').invalid) {
this.openSnackBar();
}
this.onMenu();
}
openSnackBar() {
this.snackBar.openFromComponent(ErrorRefComponent, {duration: this.displayErrorSnackbar * 1000});
}
onMenu() {
this.rayonService.obsRef.next(this.refFormGroup.get('reference').value);
}
}
html :
<app-header-zone></app-header-zone>
<div>
<mat-stepper class="example-stepper" [linear]="isLinear" #stepper (selectionChange)="onChange($event)" [orientation]="(stepperOrientation | async)!">
<mat-step [stepControl]="refFormGroup" label="Scannez une référence">
<form [formGroup]="refFormGroup">
<div class="flexInput">
<mat-form-field>
<!-- <mat-label>Scannez une référence</mat-label> -->
<input matInput id="input0" formControlName="reference" placeholder="EAN13" required>
</mat-form-field>
<div>
<button mat-button (click)="onCheckRef()" matStepperNext>Suivant</button>
</div>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup" label="Scannez une zone">
<form [formGroup]="secondFormGroup">
<div class="flexInput">
<mat-form-field>
<mat-label>Scannez une zone</mat-label>
<input matInput id="input0" formControlName="secondCtrl" placeholder="Zonage" required>
</mat-form-field>
<div>
<button mat-button (click)="initRefForm()" matStepperNext>Valider</button>
</div>
</div>
</form>
</mat-step>
</mat-stepper>
</div>
謝謝
抱歉,我找到了我添加的答案
<button mat-button (click)="stepper.reset()" matStepperNext>Valider</button>
</div>
它解決了問題
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.