对于具有多个选项的角度材料切换，我如何要求至少选择一个？

Question

我希望用户能够选择多个选项，但是如果只有一个选项，我该如何防止选择这个按钮取消选择？

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 example

Answer 1

如果你想“避免”没有选择按钮-不仅给出错误消息-：

您需要了解data binding。 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

Answer 2

您可以使用formGroup 内的表单验证器Validators.maxLength 来解决此问题，例如：

<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 将提高为假。