代码之家  ›  专栏  ›  技术社区  ›  Dmitry

角度材料2步进器-下一步

  •  7
  • Dmitry  · 技术社区  · 7 年前

    我有一个带有两个步骤的简单步进器。

    在第一步中,有一个具有两个无线电输入的表单。我想通过单击其中一个单选按钮(没有任何提交按钮)切换到下一步。我正在使用 stepper.next() 实现此目的的方法。

    问题是,只有在两次单击收音机输入后,它才会切换到下一步。

    有没有办法只单击一次就切换到下一步?

    这里有一个关于这个问题的演示 https://angular-srtsoi.stackblitz.io

    编辑: https://stackblitz.com/edit/angular-srtsoi?embed=1&file=app/stepper-overview-example.ts

    2 回复  |  直到 7 年前
        1
  •  5
  •   SplitterAlex    7 年前

    那是因为你打电话 stepper.next() 在您的 form 更新至 VALID . 因此步进器认为您的表单无效,并锁定您的步骤。

    要处理这种比赛情况,你可以 subscribe 到您的formGroup statusChange 可观察和调用 步进电机。下一个() 状态有效时:

    import {Component, ViewChild} from '@angular/core';
    import {MatStepper} from '@angular/material';
    import {FormBuilder, FormGroup, Validators} from '@angular/forms';
    
    /**
     * @title Stepper overview
     */
    @Component({
      selector: 'stepper-overview-example',
      templateUrl: 'stepper-overview-example.html',
      styleUrls: ['stepper-overview-example.css']
    })
    export class StepperOverviewExample {
      isLinear = true;
      firstFormGroup: FormGroup;
    
      @ViewChild('stepper') stepper: MatStepper;
    
      constructor(private _formBuilder: FormBuilder) { }
    
      ngOnInit() {
        this.firstFormGroup = this._formBuilder.group({
          firstCtrl: ['', Validators.required]
        });
    
        this.firstFormGroup.statusChanges.subscribe(
                status => {
                  if (status === 'VALID') {
                    this.stepper.next();
                  }
            console.log(status);
          }
        )
      }
    }
        2
  •  1
  •   Hinddeep S. Purohit    5 年前

    在调用stepper之前,尚未更新表单的有效状态。下一步()。由于您已经将nextStepper()中编写的代码专门绑定到单选按钮的click事件,因此您可以放心,只有当用户单击其中一个单选按钮时,才会调用它。因此,在某种程度上,您已经自己实现了所需的验证,不需要angular来为您执行验证。

    解决方案1: 代替

    firstCtrl: ['', Validators.required] with the following code 
    firstCtrl: ['']
    

    解决方案2: 在调用stepper之前,手动从表单控件中删除错误。next()像这样

    this.firstFormGroup.controls['firstCtrl'].setErrors(null) 
    stepper.next();