Angular 如何要求至少为具有多个选项的“角度材质切换”选择一个选项？

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

HTML:

我想通过如上所述查看选择的总数来阻止，但我无法做到

---

您可以在

表单组

内使用表单验证程序

验证程序解决此问题。例如：

<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 }}

我觉得足够了。此时，您选择了多个选项
。valid
将变为false
 如果您希望“避免”未选择任何按钮-不仅给出错误消息-：

你需要知道。Angular支持单向和双向数据绑定。即：在.html（视图）中显示的.ts（模型）中的变量。而.html中输入的更改可以是.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>

因此，我们使用[（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>

请参见
maxLength和minLength中的内容，它仅应用于字符串，而不应用于数组（mat按钮切换组提供了一个数组）
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)]
    });
  }
}


<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>

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

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

  }