如何在角度 6 中默认选择 mat-button-toggle答案

【问题标题】：How to select the mat-button-toggle by default in angular 6如何在角度 6 中默认选择 mat-button-toggle
【发布时间】：2019-03-14 15:03:59
【问题描述】：

我有一个响应式 angular-6 表单，我在其中使用了 mat-button-toggle-group

<mat-button-toggle-group #group="matButtonToggleGroup"  [(value)]="myFlagForButtonToggle" (change)="onEndpointValChange(group.value)"  multiple=false formControlName='endpoints' [(ngModel)]="myFlagForButtonToggle">
          <mat-button-toggle  *ngFor="let item of endpointToggleOptions;" [value]="item">{{item}}</mat-button-toggle>
</mat-button-toggle-group>

在我的 ts 文件中

  myFlagForButtonToggle: String[] = ["Single"];
  endpointToggleOptions: Array<String> = ["Single", "Multiple"];

但在 UI 中，默认情况下没有选择切换按钮。

请帮忙，我做错了什么

我的模型是这样的

this.outerForm = this._formBuilder.group({
  firstFormGroup: this._formBuilder.group({
    pidNumber: ['', [Validators.pattern(this.spacePattern)]],
  }),
  secondFormGroup: this._formBuilder.group({
    endpoints: ['', [Validators.required]]
  })
});

编辑：我希望 mat-button-toggle-group 也与我的模型绑定。

【问题讨论】：

用这个myFlagForButtonToggle: String = "Single"替换myFlagForButtonToggle: String[] = ["Single"];
它工作，优秀的先生，谢谢
如果您得到答案，请点赞我的评论。谢谢
@AbdulBasit，只是一个问题，如果我在这个 mat-button-toggle-group 中使用 formControlName，默认选择不起作用。有什么想法吗？
如果您将selected 值（即“single”）分配给formControlName="" 值将被自动分配，它就像ngModel 一样工作

标签： angular

【解决方案1】：

Here 是一个工作示例：

HTML 代码：

<form [formGroup]="outerForm">
    <div formGroupName="secondFormGroup">
        <mat-button-toggle-group #group="matButtonToggleGroup" (change)="onEndpointValChange(group.value)" multiple="false" formControlName='endpoints'
         [(ngModel)]="myFlagForButtonToggle">
            <mat-button-toggle *ngFor="let item of endpointToggleOptions;" [value]="item">{{item}}</mat-button-toggle>
        </mat-button-toggle-group>
    </div>
</form>

TS 代码：

import { Component } from '@angular/core';

import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';

/**
 * @title Exclusive selection
 */
@Component({
  selector: 'button-toggle-exclusive-example',
  templateUrl: 'button-toggle-exclusive-example.html',
  styleUrls: ['button-toggle-exclusive-example.css'],
})
export class ButtonToggleExclusiveExample {

  myFlagForButtonToggle: String = "Single";
  endpointToggleOptions: Array<String> = ["Single", "Multiple"];
  outerForm: FormGroup;
  constructor(private _formBuilder: FormBuilder) {
    this.outerForm = this._formBuilder.group({
      firstFormGroup: this._formBuilder.group({ pidNumber: new FormControl(''), }), secondFormGroup:
        this._formBuilder.group({ endpoints: new FormControl(''), })
    });
  }
}

【讨论】：

YEEE，非常感谢