问题描述
How can I clear <mat-radio-button>
selected on second click(after it is already selected)
I know I can implement this behavior with checkbox but i need to allow select only one item.
Any help?
My code look like :
<mat-radio-group name="WasFamilyMemberPresent">
<mat-radio-button *ngFor="let item of lookupNoYes" [value]="item.Code" >
{{item.Desc}}
</mat-radio-button>
</mat-radio-group>
You can do the following to accomplish this.
Assign a template reference to the button #button
and pass it to the component method (click)="checkState(button)"
<mat-radio-button #button class="example-radio-button" *ngFor="let season of seasons" [value]="season" (click)="checkState(button)">
Create a local variable in the component to store the button value for comparison in checkState()
currentCheckedValue = null;
DI Renderer2 to remove focus from the button
constructor(private ren: Renderer2) { }
Wrap logic in setTimeout
to put it on the digest cycle, check if local variable exist and if current value equals argument value... if true deselect, remove focus and null local variable... else set local variable for future comparison.
checkState(el) {
setTimeout(() => {
if (this.currentCheckedValue && this.currentCheckedValue === el.value) {
el.checked = false;
this.ren.removeClass(el['_elementRef'].nativeElement, 'cdk-focused');
this.ren.removeClass(el['_elementRef'].nativeElement, 'cdk-program-focused');
this.currentCheckedValue = null;
this.favoriteSeason = null;
} else {
this.currentCheckedValue = el.value
}
})
}
Stackblitz
https://stackblitz.com/edit/angular-c37tsw?embed=1&file=app/radio-ng-model-example.ts
这篇关于多次单击时未选中角度材料垫单选按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!