回到步进角料的第一步

Question

first of all hello to the whole community, I am beginner with angular, this is my first message.

I encounter the following problem :

I have a stepper with two fields. Whole stepper

When I validate the second field, I would like to go back to step1 with the focus enabled like this:

back stepper 1 with focus

here is my code :

typsescript :

    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>

Thank you

Answer 1

Sorry, I found my answer I added

<button mat-button (click)="stepper.reset()" matStepperNext>Valider</button>
        </div>

it solve the problem