Угловой шаговый материал Последний шаг доступен, когда все сделано без - PullRequest
Новая
       9

Угловой шаговый материал Последний шаг доступен, когда все сделано без

1 голос
/ 09 мая 2019

Как и в заголовке, я хочу сделать последний шаг доступным, когда остальные уже заполнены.

Мои шаги выглядят так: 1-Данные для входа -> 2-Личные данные -> 3-Check

Не было бы смысла добираться до чека, не имея всех деталей.Но я не хочу делать это линейно, чтобы вы могли переключаться между логином и личными данными, как вы хотите.

HTML: 

<mat-horizontal-stepper #stepper>
      <ng-template matStepperIcon="edit">
        <mat-icon>check</mat-icon>
      </ng-template>
<mat-step [stepControl]="registerForm" errorMessage="{{ 'REGISTRATION.STEPPER_ERROR_LOGIN' | translate }}"> 
...
 </mat-step>

<mat-step [stepControl]="personalForm" errorMessage="{{ 'REGISTRATION.STEPPER_ERROR_PERSONAL' | translate }}">
...
</mat-step>

<mat-step [stepControl]="registerForm && personalForm" errorMessage="Überprüfung steht aus">
...
</mat-step>
</mat-horizontal-stepper>

TS: 

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.scss'],
  providers: [{
    provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true }
  }]
})
export class RegistrationComponent implements OnInit {

1 Ответ

1 голос
/ 09 мая 2019

Решение 1:

Добавить optional к первому mat-step

<mat-step [stepControl]="registerForm" errorMessage="{{ 'REGISTRATION.STEPPER_ERROR_LOGIN' | translate }}" optional>

Решение 2:

  1. Установите mat-stepper или mat-horizontal-stepper как линейный, например ::

    <mat-horizontal-stepper linear="true">

  2. Добавьте completed свойство к первому mat-step. Позволяет перейти ко второму шагу без заполнения формы.

    <mat-step completed>

  3. Не используйте stepControl на кулаке mat-step. Например.

    <mat-step[stepControl]="firstFormGroup"completed>

Пример кода:

а) HTML: 

<mat-horizontal-stepper linear="true" #stepper>
<mat-step completed>
  <form [formGroup]="firstFormGroup">
    <ng-template matStepLabel>Fill out your name</ng-template>
    <mat-form-field>
      <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
    </mat-form-field>
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
  </form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
  <form [formGroup]="secondFormGroup">
    <ng-template matStepLabel>Fill out your address</ng-template>
    <mat-form-field>
      <input matInput placeholder="Address" formControlName="secondCtrl" required>
    </mat-form-field>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </form>
</mat-step>
<mat-step>
  <ng-template matStepLabel>Done</ng-template>
  You are now done.
  <div>
    <button mat-button matStepperPrevious>Back</button>
    <button mat-button (click)="stepper.reset()">Reset</button>
  </div>
</mat-step>

b) TS: 

import {Component, OnInit} from '@angular/core';
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 implements OnInit {
  isLinear = false;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
  }
}
...