Angular 带按钮切换多个的 FormControl

Question

我有以下对象

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

数组的第 3、4 和 5 个值代表我想要的一些切换按钮的值，如下所示。

在我的组件中我有：

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"，我会收到错误消息：No value accessor for form control with name: 'audienceLearner'

所以我需要让按钮显示为预选状态，并且我需要在单击按钮时更新值。

Answer 1

通过使用 [value]="applicationSettings.Initial[2]"，您将按下按钮时传递的值设置为 true，而不是传递“学习者”。（我假设这是意图，因为其他两个按钮的值与其按钮文本匹配）

对于 mat-button-toggle-group，如果您给它 value 属性等于 mat-toggle-button 值之一，那么具有该值的按钮将显示为已按下。例如，这将使第一个按钮默认按下：

<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" 时，值存储为数组。按下所有三个按钮将导致 ["learner", "manager", "clientAdmin"]。您将需要一些函数来根据对象中的布尔值创建一个字符串数组，然后将该数组应用于值属性.

Angular 带按钮切换多个的 FormControl

Angular FormControl with Button Toggle Multiple

angular

angular-material

angular-forms