Как я могу потребовать, чтобы был выбран хотя бы один для переключения angular материалов с несколькими опциями? - PullRequest
Новая
       24

Как я могу потребовать, чтобы был выбран хотя бы один для переключения angular материалов с несколькими опциями?

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

Я хочу, чтобы пользователь мог выбрать несколько вариантов, но если есть только один вариант, как я могу предотвратить отмену выбора этой кнопки?

HTML: 

<mat-button-toggle-group (change)="changeOpt($event)" multiple name="fontStyle" aria-label="Font Style">
    <mat-button-toggle value="opt1" [checked]="true">Opt1</mat-button-toggle>
    <mat-button-toggle value="opt2" [checked]="true">Opt2</mat-button-toggle>
    <mat-button-toggle value="opt3" [checked]="true">Opt3</mat-button-toggle>
</mat-button-toggle-group>

TS: 

changeOpt(evt: any) {
    if (evt.value.length === 1) {
        // PreventDefault
    }
}

Я хотел предотвратить, посмотрев на общее количество выбранных вариантов, как указано выше, но не смог

пример stackblitz

Ответы [ 2 ]

1 голос
/ 17 июня 2020

Если вы хотите «избежать» того, что кнопка не выбрана - не только выдает сообщение об ошибке -:

Вам нужно знать о привязке данных . Angular поддерживает одно- и двустороннюю привязку данных. Это: переменные в .ts (модель), которые показаны в. html (представление). И изменение входных данных в. html может быть изменением переменной в .ts

Итак, мы используем [(ngModel)], чтобы присвоить значение одной переменной в .ts 

<mat-button-toggle-group [(ngModel)]="value" multiple 
     name="fontStyle" aria-label="Font Style">
    <mat-button-toggle value="opt1" (change)="change($event)">Opt1</mat-button-toggle>
    <mat-button-toggle value="opt2" (change)="change($event)">Opt2</mat-button-toggle>
    <mat-button-toggle value="opt3" (change)="change($event)">Opt3</mat-button-toggle>
</mat-button-toggle-group>

Изменение функции, проверьте длину «значения», если оно равно 1, сохраните в переменной значение, если равно 0, восстановите переменную 

change(evt: any) {
    if (this.value.length === 1)
      this.oldValue = this.value[0];

    if (this.value.length === 0) 
      this.value = [this.oldValue];

  }

См. В stackblitz

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

Вы можете решить эту проблему, используя валидатор формы Validators.maxLength внутри formGroup, например: 

<form [formGroup]="exampleForm">
  <mat-button-toggle-group formControlName="items" (change)="changeOpt($event)" multiple name="fontStyle" aria-label="Font Style">
      <mat-button-toggle value="opt1" [checked]="true">Opt1</mat-button-toggle>
      <mat-button-toggle value="opt2" [checked]="true">Opt2</mat-button-toggle>
      <mat-button-toggle value="opt3" [checked]="true">Opt3</mat-button-toggle>
  </mat-button-toggle-group>
</form>

{{ exampleForm.controls.items.value }}
{{ exampleForm.controls.items.value.length }}

{{ exampleForm.valid }}

и 

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

@Component({
  selector: 'button-toggle-appearance-example',
  templateUrl: 'button-toggle-appearance-example.html',
  styleUrls: ['button-toggle-appearance-example.css'],
})
export class ButtonToggleAppearanceExample implements OnInit {
  exampleForm: FormGroup;
  constructor(
    private formBuilder: FormBuilder,
  ) { }
  ngOnInit(): void {
    this.exampleForm = this.formBuilder.group({
      items: [null, Validators.maxLength(1)]
    });
  }
}

Я думаю, этого достаточно. В настоящий момент вы выбираете более одного варианта .valid, который будет повышен до false.

...