Linear Stepper does not work with non-form content


Topic: Linear Stepper does not work with non-form content

Lustig asked 4 years ago

*Expected behavior*I am am using the angular version of the linear stepper and need a way to prevent the user to skip steps, if the steps e.g. require selection of cards (people with their picture)

*Actual behavior*it works almost great, but if there are steps, that not contain a form, but other controls (e.g. selection of people via cards). It seams that currently the stepper does not provide such a functionality. enter link description hereHow could i find a workaround to this problem?

Thanking you very much in advance best regards Thomas


Arkadiusz Idzikowski staff answered 4 years ago

You can try to use hidden checkboxes and mark them as checked when a certain condition is met. For example:

HTML:

<mdb-stepper #stepper [linear]="true">
    <mdb-step name="Step 1" [stepForm]="firstFormGroup">
      <form [formGroup]="firstFormGroup">
        <div class="md-form">
            <button type="button" mdbBtn color="primary" mdbWavesEffect (click)="completeFirst()">Complete first step</button>
            <mdb-checkbox hidden formControlName="first">First</mdb-checkbox>
        </div>
      </form>
      <button mdbBtn size="sm" color="primary" (click)="stepper.next()">CONTINUE</button>
    </mdb-step>
    <mdb-step name="Step 2" [stepForm]="secondFormGroup">
      <form [formGroup]="secondFormGroup">
        <div class="md-form">
            <button type="button" mdbBtn color="primary" mdbWavesEffect (click)="completeSecond()">Complete second step</button>
            <mdb-checkbox hidden formControlName="second">Second</mdb-checkbox>
        </div>
      </form>
      <button mdbBtn size="sm" color="primary" (click)="stepper.next()">CONTINUE</button>
      <button mdbBtn size="sm" color="secondary" (click)="stepper.previous()">BACK</button>
    </mdb-step>
    <mdb-step name="Step 3" label="Step 3 label">
      <p class="pl-2">Finish!</p>
      <div class="step-actions">
        <button mdbBtn  size="sm" color="primary" (click)="onSubmit()">SUBMIT</button>
      </div>
    </mdb-step>
  </mdb-stepper>

TS:

  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  ngOnInit() {
    this.firstFormGroup = new FormGroup({
      first: new FormControl(false, [Validators.requiredTrue])
    });
    this.secondFormGroup = new FormGroup({
      second: new FormControl(false, [Validators.requiredTrue])
    });
  }

  completeFirst() {
    this.first?.setValue(true);
  }

  completeSecond() {
    this.second?.setValue(true);
  }

  get first() { return this.firstFormGroup.get('first'); }
  get second() { return this.secondFormGroup.get('second'); }

  onSubmit() {
    // do something here
  }

Lustig commented 4 years ago

thank you very much - this works perfectly!!! best regards

Thomas


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes