angular - 如何在角度 6 中默认选择 mat-button-toggle
问题描述
我有一个反应性 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 也与我的模型绑定。
解决方案
这是一个工作示例:
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(''), })
});
}
}
推荐阅读
- java - 我的应用是 android.view.WindowManager$BadTokenException
- c# - 从父表单设置子表单图像?
- android - 异步任务和进度条
- csv - 读取 CSV 多部分输入时 Spring Boot 多部分应用程序失败
- excel - 如何在不跳转行Excel的情况下通过复制在工作表上选择行中的值
- c# - 自定义类的 Blazor 验证
- python - 如何访问模型中外键的属性?
- java - 如何修复 DaggerSingletonComponent 未在 HiveMQ(MQTT 协议)中解析
- html - less 选择器:选择同级元素,其中直接前面的元素包含具有特定类的另一个元素
- java - 如何创建一个填充了对象列的组合框?(爪哇)