Question

我目前正在开发一个使用材料步进器的应用程序。此步进器有 2 个步骤。我遇到的问题是这样的：当用户验证第一个字段的条目，离开页面返回步进器时，第一个字段的条目消失了。

但是，第一个字段的条目也允许出现一个datatable，所以在我刚才提到的场景中datatable丢失了

我的问题是：如果用户离开页面然后又回来，我如何让用户恢复到当前状态？

这是步进代码html：

<!-- SCAN REFERENCE INPUT -->
    <div class="stepper-zone">
      <mat-vertical-stepper [linear]="isLinear" #stepper (selectionChange)="onChange($event)">
        <mat-step [stepControl]="refFormGroup" label="Scannez une référence">
          <form [formGroup]="refFormGroup">
            <ng-template matStepLabel>{{ 'ZONAGE.CODE_BARRE_REF' | translate }}</ng-template>
            <div class="flexInput">
              <mat-form-field>
                <input matInput id="input0" autocomplete="off" formControlName="reference"
                  placeholder="{{ 'ZONAGE.CODE_BARRE_REF_PLACEHOLDER' | translate }}" required>
              </mat-form-field>
              <div>
                <button mat-mini-fab color="primary" (click)="onCheckRef()" matStepperNext aria-label="">
                  <mat-icon>done</mat-icon>
                </button>
              </div>
            </div>
          </form>
        </mat-step>

        <!-- SCAN ZONE INPUT -->
        <mat-step [stepControl]="zoneFormGroup" label="Scannez une zone">
          <form [formGroup]="zoneFormGroup">
            <ng-template matStepLabel>{{ 'ZONAGE.CODE_ZONE' | translate }}</ng-template>
            <div class="flexInput">
              <mat-form-field>
                <input matInput id="input1" autocomplete="off" formControlName="zone"
                  placeholder="{{ 'ZONAGE.CODE_ZONE_PLACEHOLDER' | translate }}" required>
              </mat-form-field>
              <div>
                <button mat-mini-fab color="primary" (click)="resetStepper(0)" matStepperNext
                  aria-label="icon button with a symbol enter icon">
                  <mat-icon>done</mat-icon>
                </button>
              </div>
            </div>
          </form>
        </mat-step>
      </mat-vertical-stepper>
    </div>
  </div>

这是控制器的一部分

-------------------------------------------------

  ngOnInit() {
    this.productItem = null;
    this.isDisplayProduct = false;
    this.initStepperForm();
  }

  ngAfterViewInit() {
    this.setFocus();
  }

  initStepperForm() {
    this.refFormGroup = this.formBuilder.group({
      reference: ['', [Validators.required, Validators.pattern(this.refBarCodePattern)]]
    });
    this.zoneFormGroup = this.formBuilder.group({
      zone: ['', [Validators.required, Validators.pattern(this.zoneCodePattern)]]
    });
  }

  async refreshData(): Promise<any[]> {
    // this.dataSource = null;
    this.productItem = null;
    this.codeBarRef = this.refFormGroup.get('reference').value;
    await new Promise<any[]>(resolve =>
      setTimeout(resolve, 200));
    return this.productItem = this.rayonService.items; //fake data in service
  }

  onCheckRef() {
    if (this.refFormGroup.get('reference').invalid) {
    } else {
      this.refreshData();
    }
  }

  onChange(event: any) {
    let index = String(event.selectedIndex);
    this.targetInput = 'input' + index;
    if (index === "0") this.isDisplayProduct = false;
    else if (index === "1") this.isDisplayProduct = true;
    this.setFocus();
  }

  setFocus() {
    let targetCurrentInput = document.getElementById(this.targetInput);
    setTimeout(function waitTargetElem() {
      if (document.body.contains(targetCurrentInput)) {
        targetCurrentInput.focus();
      } else {
        setTimeout(waitTargetElem, 100);
      }
    }, 100);
  }

  resetStepper(index: number) {
    if (this.zoneFormGroup.get('zone').valid) {
      this.stepper.selectedIndex = index;
      this.initStepperForm();
    } else {
      // Définir gestion erreur scan zone
      console.log("error form");
    }
  }

----------------------------------------------------

非常感谢您的帮助

重置为页面更改的角度材料步进器

0 个答案: