如何在angular 6中默认选择mat按钮切换
我有一个反应性的angular-6表单,其中我使用了mat按钮切换组如何在angular 6中默认选择mat按钮切换,angular,Angular,我有一个反应性的angular-6表单,其中我使用了mat按钮切换组 <mat-button-toggle-group #group="matButtonToggleGroup" [(value)]="myFlagForButtonToggle" (change)="onEndpointValChange(group.value)" multiple=false formControlName='endpoints' [(ngModel)]="myFlagForButtonToggle
<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>
编辑:我希望mat按钮切换组也与我的模型绑定。是一个工作示例:
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(''), })
});
}
}
替换myFlagForButtonToggle:String[]=[单个];有了这个myFlagForButtonToggle:String=Single,它就可以工作了,非常好的先生,谢谢。如果你得到了答案,请投票表决我的评论。Thanks@AbdulBasit,只是一个问题,如果我在这个mat按钮切换组中使用formControlName,默认选择将不起作用。有什么想法吗?如果您将指定您选择的值,即single to formControlName=值将自动指定,它就像NGModelYee一样工作,非常感谢
<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>
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(''), })
});
}
}