typescript 取消选择单选按钮 Angular 2？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47012311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Deselect radio button Angular 2?
提问by Munna Babu
I am trying to deselect a radio button in Angular 2. I tried the following code but it doesn't help.
我正在尝试取消选择 Angular 2 中的单选按钮。我尝试了以下代码，但没有帮助。
.html
.html
<div [formGroup]="myForm">
<mat-radio-group matInput (click)= "resetRadio($event)" formControlName="RdoSel">
<mat-radio-button *ngFor="let RadioOpt of RadioOpts" [value]="RadioOpt .id">{{RadioOpt .value}}</mat-radio-button>
</mat-radio-group>
</div>
.ts
.ts
public RadioOpts= [
{ id: 'Market', value : 'Market'},
{ id: 'Segment', value : 'Segment'}
];
public resetRadio(event: any) {
if(myForm.get('RdoSel').value===event.target.value){
myForm.get('RdoSel').setValue('false');
}
When I console.log(event.target.value)it returns <div>tags. Could someone please tell me how to deselect a radio button in Angular 2?
当我console.log(event.target.value)返回<div>标签时。有人可以告诉我如何取消选择 Angular 2 中的单选按钮吗？
回答by snjynegi
Using reactive forms, we can use
使用反应式形式，我们可以使用
yourFormName.controls['youRradioFormContolName'].reset();
this will reset you radio to unchecked.
这会将您的收音机重置为未选中状态。
回答by borracciaBlu
For me what it did worked was:
对我来说，它的作用是：
html:
html：
<mat-radio-button value="1"
(click)="clickRadio($event, 1)"
[checked]="isRadioSelected(1)">1</mat-radio-button>
ts:
ts：
private radioVal:number;
public clickRadio(event:Event, value:any) {
event.preventDefault();
if (! this.radioVal || this.radioVal !== value) {
this.radioVal = year;
this.form.patchValue({myForm: this.radioVal});
return;
}
if (this.radioVal === value) {
this.radioVal = undefined;
this.form.get('myForm').reset();
}
}
public isRadioSelected(value:any) {
return (this.radioVal === value);
}
回答by Steve Klock
To turn off a radio button you can use binding on the radio buttons html attribute "checked" and then create a property (variable) in your component like "radioStatus: boolean;", as mentioned above. Then you can change the value of the binding by assigning false or true to radioStatus. You can access the current value of the radio button via an event. Here are the examples.
要关闭单选按钮，您可以在单选按钮 html 属性“checked”上使用绑定，然后在您的组件中创建一个属性（变量），如“radioStatus: boolean;”，如上所述。然后您可以通过为 radioStatus 分配 false 或 true 来更改绑定的值。您可以通过事件访问单选按钮的当前值。以下是示例。
The html
html
<input type="radio" name="example" [checked]="radioStatus" (change)="example($event)"/>
In the component - property
在组件中 - 属性
radioStatus: boolean;
In the component - view current value
在组件中——查看当前值
example($event) {
console.log(event.target['checked']);
}
In the component - removing check from radio button
在组件中 - 从单选按钮中删除检查
example($event) {
this.radioStatus = false;
}
回答by Fateh Mohamed
you can use checked property that way:
您可以这样使用已检查的属性：
[checked]="condition"
<mat-radio-button *ngFor="let RadioOpt of RadioOpts" [checked]="yourCondition"
[value]="RadioOpt .id">{{RadioOpt .value}}</mat-radio-button>
you can get the value like that in your component :
你可以在你的组件中获得这样的值：
$event.target.checked
