Angular

Question

在 Angular-12 中，我正在实施 Material 步进器：

@ViewChild('stepper') stepper!: MatHorizontalStepper;
isLinear = true; 
districtInfoForm!: FormGroup;
zonalInfoForm!: FormGroup;
groupInfoForm!: FormGroup;
regionInfoForm!: FormGroup;
stateInfoForm!: FormGroup;
countryInfoForm!: FormGroup;

ngOnInit() {
  this.createEmployee();
}

districtNext() {
  if (!this.districtInfoForm.valid) {
    this.districtInfoForm.markAllAsTouched();
    return;
  }
  this.stepper.next();
}

zonalNext() {
  if (!this.zonalInfoForm.valid) {
    this.zonalInfoForm.markAllAsTouched();
    return;
  }
  this.stepper.next();
}

groupNext() {
  if (!this.groupInfoForm.valid) {
    this.groupInfoForm.markAllAsTouched();
    return;
  }
  this.stepper.next();
}

regionNext() {
  if (!this.regionInfoForm.valid) {
    this.regionInfoForm.markAllAsTouched();
    return;
  }
  this.stepper.next();
}

stateNext() {
  if (!this.stateInfoForm.valid) {
    this.stateInfoForm.markAllAsTouched();
    return;
  }
  this.stepper.next();
}

countryNext() {
  if (!this.countryInfoForm.valid) {
    this.countryInfoForm.markAllAsTouched();
    return;
  }
  this.stepper.next();
}

HTML

<div class="card-body">
  <mat-horizontal-stepper [linear]="isLinear" #stepper labelPosition="bottom">
    <mat-step [stepControl]="districtInfoForm">
      <ng-template matStepLabel>District</ng-template>
      <form>

        <div class="card-footer">
          <button mat-raised-button color="primary" matStepperNext (click)="districtNext()">Next</button>
        </div>
      </form>
    </mat-step>
    <mat-step [stepControl]="zonalInfoForm">
      <ng-template matStepLabel>Zonal Info</ng-template>
      <form>

        <div class="card-footer">
          <button mat-raised-button color="black" matStepperPrevious>Back</button>&nbsp;
          <button mat-raised-button color="primary" matStepperNext (click)="zonalNext()">Next</button>
        </div>
      </form>
    </mat-step>
    <mat-step [stepControl]="groupInfoForm">
      <ng-template matStepLabel>Group Info</ng-template>
      <form>

        <div class="card-footer">
          <button mat-raised-button color="black" matStepperPrevious>Back</button>&nbsp;
          <button mat-raised-button color="primary" matStepperNext (click)="groupNext()">Next</button>
        </div>
      </form>
    </mat-step>
    <mat-step [stepControl]="regionInfoForm">
      <ng-template matStepLabel>Region Details</ng-template>
      <form>

        <div class="card-footer">
          <button mat-raised-button color="black" matStepperPrevious>Back</button>&nbsp;
          <button mat-raised-button color="primary" matStepperNext (click)="regionNext()">Next</button>
        </div>
      </form>
    </mat-step>
    <mat-step [stepControl]="stateInfoForm">
      <ng-template matStepLabel>State Details</ng-template>
      <form>

        <div class="card-footer">
          <button mat-raised-button color="black" matStepperPrevious>Back</button>&nbsp;
          <button mat-raised-button color="primary" matStepperNext (click)="stateNext()">Next</button>
        </div>
      </form>
    </mat-step>
    <mat-step [stepControl]="countryInfoForm">
      <ng-template matStepLabel>Country History</ng-template>
      <form>
        <div class="row">
          <div class="col-md-12">
            <div class="row">

            </div>
          </div>
        </div>
        <div class="card-footer">
          <button mat-raised-button color="black" matStepperPrevious>Back</button>&nbsp;
          <button mat-raised-button color="primary" matStepperNext (click)="countryNext()">Next</button>
        </div>
      </form>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>Review</ng-template>
      <h5 style="color:blue;">You are now done.</h5>
      <hr>

    </mat-step>

  </mat-horizontal-stepper>
</div>

当表单控件在那里时，它只跳过第一步。即从District到Group。然后我删除了表单控件，它在每次单击时跳过一个步骤 Distict -> Group -> State -> Review

但是后退按钮不是那样的。

可能是什么原因造成的，我该如何解决？

谢谢

Answer 1

这是因为 matStepperNext 按钮上的属性用于下一步。此属性本身在步进器上发出 .next() 函数，并且您在（单击）函数中第二次执行此操作。

从函数中删除 this.stepper.next()：

districtNext()
zonalNext()
groupNext()
regionNext()
stateNext()
下一个国家()

我还建议将所有这些方法更改为一个：

nextValidation(form: FormGroup) {
  if (!form.valid) {
    form.markAllAsTouched();
    return;
  }
}

并在 html 中传递特定的 FormGroup；

Angular - Material 步进器在下一步单击时跳过一个步骤

Angular - Material Stepper Skips one step on Next Step Click

angular-material-stepper