Angular 带按钮切换的角度窗体控件

我有以下目标

currentApplication = { 
          'Initial': [12, 2, true, true, false], 
          'Reminder1': [8, 2, true, true, false], 
          'Reminder2': [4, 2, true, true, false], 
          'Reminder3': [2, 2, true, true, false] 
        }

数组的第三个、第四个和第五个值表示我想要的一些切换按钮的值，如下所示

在我的组件中，我有：

this.mySettingsForm = new FormGroup({
      audienceLearner: new FormControl(applicationSettings.Initial[2]),
      audienceLineManager: new FormControl(applicationSettings.Initial[3]),
      audienceClientAdmin: new FormControl(applicationSettings.Initial[4])
    })

在我的HTML中，我有

 <form [formGroup]="mySettingsForm" autocomplete="off">
  <mat-button-toggle-group name="audience" aria-label="audience" multiple="true" >
   <mat-button-toggle [value]="applicationSettings.Initial[2]">Learner</mat-button-toggle>
   <mat-button-toggle value="manager">Line Manager</mat-button-toggle>
   <mat-button-toggle value="clientAdmin">Client Admin</mat-button-toggle>
  </mat-button-toggle-group>
 </form>

学习者
部门经理
客户端管理员

我希望，因为

applicationSettings.Initial[2]

中的值是真的，所以按钮会显示为预先选择的，但不会。如果我在按钮上使用formControlName=“audienceLearner”，我会得到一个错误：

对于名为“audienceLearner”的表单控件，没有值访问器。

因此，我需要让按钮显示为预选，并且我需要在单击按钮时更新值。

通过使用

[value]=“applicationSettings.Initial[2]”

将按下按钮时传递的值设置为

true

，而不是传递“learner”。（我假设这就是目的，因为其他两个按钮的值与它们的按钮文本相匹配）

对于

mat-button-toggle组

，如果您给它一个

值

属性，该属性等于

mat-toggle button

s'值之一，则具有该值的按钮将显示为按下。例如，这将使默认情况下第一个按钮被按下：

<mat-button-toggle-group name="audience" aria-label="audience" multiple="true" value="learner" >
 <mat-button-toggle value="learner">Learner</mat-button-toggle>
 <mat-button-toggle value="manager">Line Manager</mat-button-toggle>
 <mat-button-toggle value="clientAdmin">Client Admin</mat-button-toggle>
</mat-button-toggle-group>

学习者
部门经理
客户端管理员

---

使用

multiple=“true”

时，值存储为数组。按下所有三个按钮将导致

[“学习者”、“管理者”、“客户管理员”]

。您需要一些函数来根据对象中的布尔值创建一个字符串数组，然后将该数组应用于value属性。

太棒了。谢谢你给我指明了正确的方向！