Угловой: Создание группы переключения кнопок требуется для материала Stepper - PullRequest
Новая
       9

Угловой: Создание группы переключения кнопок требуется для материала Stepper

0 голосов
/ 17 июня 2019

Я относительно новичок в Angular и только начинаю понимать компоненты Material Design и то, как они работают и могут взаимодействовать друг с другом.

Я создаю многошаговое веб-приложение, поэтому было бы логично использовать Material Stepper. Пользователь также сможет выбирать между различными опциями на этих шагах, поэтому я использовал Button Toggle Group для представления этих опций.

То, что я хотел бы сделать - и мне интересно, возможно ли это - сделать группу переключателей кнопок «обязательным» полем для степпера. В некоторых случаях группа переключателей будет единственной опцией на этом шаге, и я хотел бы сделать так, чтобы пользователь не мог перейти на следующий шаг, не выбрав опцию Toggle Group.

Я пробовал простые решения, такие как добавление «required» к переключателю mat-button, например: 

<mat-button-toggle (click)="getOptionName(Oname);" class="btn btn-primary step-button" id="{{step1option.id}}" [ngClass]="status ? 'selected' : ''" required><span #Oname>{{step1option.text}}</span></mat-button-toggle>

И на группу кнопок-матов-переключателей: 

<mat-button-toggle-group required>

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

Очевидно, что это не сработало, и мои знания об Angular в настоящее время не так уж широки, и попытки различных поисков не дали ничего полезного (и / или всего, что я мог бы понять).

Вот мой код:

Мой component.html: 

<mat-horizontal-stepper [linear]="isLinear" #stepper>
    <mat-step label="Step 1" [stepControl]="firstFormGroup">

        <form [formGroup]="firstFormGroup">

        <div ng-controller="step1">

            <h2>I'm thinking of...</h2>

            <mat-button-toggle-group>
              <div *ngFor="let step1option of step1options">
                <mat-button-toggle (click)="getOptionName(Oname);" class="btn btn-primary step-button" id="{{step1option.id}}" [ngClass]="status ? 'selected' : ''"><span #Oname>{{step1option.text}}</span></mat-button-toggle>
              </div>
              </mat-button-toggle-group>

            <div>You chose <strong>{{ selectedStep1Option }}!</strong></div>

            <button mat-stroked-button matStepperNext class="btn btn-secondary continue-btn">Continue</button>

         </div>

          </form>

        </mat-step>

        <mat-step label="Step 2" [stepControl]="secondFormGroup">
            <form [formGroup]="secondFormGroup">
              <p>Test</p>
            </form>
        </mat-step>

        <mat-step label="Step 3" [stepControl]="thirdFormGroup">
            <form [formGroup]="thirdFormGroup">
              <p>Test</p>
            </form>
        </mat-step>

</mat-horizontal-stepper>

И мой component.ts: 

import { Component, OnInit } from '@angular/core';
import { TimeoutError } from 'rxjs';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-customer-portal-step1',
  templateUrl: './customer-portal-step1.component.html',
  styleUrls: ['./customer-portal-step1.component.scss']
})

export class CustomerPortalStepOneComponent implements OnInit {

  isLinear = true;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  thirdFormGroup: FormGroup;

  constructor(private _formBuilder: FormBuilder) { }

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

  selectedStep1Option: string = 'nothing yet';

  step1options = [
    {
      text: 'Buying my first home',
      id: 'buying'
    },
    {
      text: 'Moving to a new home',
      id: 'moving'
    },
    {
      text: 'Remortgaging my home',
      id: 'remortgage'
    },
    {
      text: 'Purchasing a buy-to-let',
      id: 'purchase'
    }
  ];

  status: boolean = false;

  getOptionName (Oname: any) {
    this.selectedStep1Option = Oname.textContent;
    localStorage.setItem('I\'m thinking of:', JSON.stringify({ motivation: Oname.textContent }));
  }

}

Полагаю, я спрашиваю, возможно ли это, я на правильном пути, а если нет, то какой мне лучше всего получить результат, на который я надеюсь?

Буду признателен за любую помощь, которую вы можете предложить.

1 Ответ

0 голосов
/ 17 июня 2019

Вы можете использовать атрибут disabled вместе с динамическим выражением, чтобы отключить matStepperNext, не позволяя пользователю двигаться вперед в степпере.Похоже, ваше значение по умолчанию 'nothing yet'.Вы можете отключить кнопку, например, проверив, является ли значение по умолчанию / недействительным 'nothing yet': 

<mat-button-toggle-group>
  <div *ngFor="let step1option of step1options">
    <mat-button-toggle (click)="getOptionName(Oname);" class="btn btn-primary step-button" id="{{step1option.id}}" [ngClass]="status ? 'selected' : ''"><span #Oname>{{step1option.text}}</span></mat-button-toggle>
  </div>
</mat-button-toggle-group>

<div>You chose <strong>{{ selectedStep1Option }}!</strong></div>

<button mat-stroked-button matStepperNext class="btn btn-secondary continue-btn" [disabled]="selectedStep1Option === 'nothing yet'">Continue</button>

Вот пример в действии, показывающий отключение кнопки на основеmat-button-toggle-group значение.

Надеюсь, это поможет!

...