取消选择单选按钮 Angular 2?

Posted

技术标签:

【中文标题】取消选择单选按钮 Angular 2?【英文标题】:Deselect radio button Angular 2? 【发布时间】:2018-04-11 06:13:14 【问题描述】:

我正在尝试取消选择 Angular 2 中的单选按钮。我尝试了以下代码,但没有帮助。

.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

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');

当我console.log(event.target.value) 它返回&lt;div&gt; 标签。有人可以告诉我如何取消选择 Angular 2 中的单选按钮吗?

【问题讨论】:

单选按钮不适合取消选择,最好选择复选框,单选按钮用于选项之一或其他 谢谢@RahulSingh,但这是客户要求 【参考方案1】:

使用反应形式,我们可以使用

yourFormName.controls['youRradioFormContolName'].reset();

这会将您的收音机重置为未选中。

【讨论】:

【参考方案2】:

对我来说,它的作用是:

html:

<mat-radio-button value="1" 
                  (click)="clickRadio($event, 1)" 
                  [checked]="isRadioselected(1)">1</mat-radio-button>

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);

【讨论】:

在这里工作!但我需要删除“event.preventDefault();”。【参考方案3】:

要关闭单选按钮,您可以对单选按钮 html 属性“checked”使用绑定,然后在组件中创建一个属性(变量),如“radioStatus: boolean;”,如上所述。然后,您可以通过将 false 或 true 分配给 radioStatus 来更改绑定的值。您可以通过事件访问单选按钮的当前值。以下是示例。

html

<input type="radio" name="example" [checked]="radioStatus" (change)="example($event)"/>

在组件中——属性

radioStatus: boolean;

在组件中——查看当前值

example($event) 
   console.log(event.target['checked']);

在组件中 - 从单选按钮中删除检查

example($event) 
   this.radioStatus = false;

【讨论】:

刚开始工作。更改其他单选按钮后,不再起作用。 @borracciaBlue 解决方法对我帮助很大:***.com/a/49122959/6166911.【参考方案4】:

非物质解决方案

您可以按如下方式使用@ViewChilder(我的代码)

<div *ngFor="let item of items">
    <label>
        <input
            #radioInput
            type="radio"
            [value]="item.id"
            [checked]="item.checked"
            (input)="onChange(item, radioInput)"
        />
        <span> item.label ? item.label : item.labelKey </span>
    </label>
</div>

在 .ts 文件中

@ViewChildren('radioInput') radioInputs: ElementRef[];
...

onChange(chosenItem: FieldRadioItem, inpCheckbox: HTMLInputElement) 

    [...this.radioInputs].forEach((inp) => 
            if (inp.nativeElement != inpCheckbox) inp.nativeElement.checked = false;
    ...
);

FieldRadioItem 仅包含字段idlabelchecked。 在 Angular 11 上测试

【讨论】:

以上是关于取消选择单选按钮 Angular 2?的主要内容,如果未能解决你的问题,请参考以下文章

如何以编程方式重置或取消选中 Angular 中的单选按钮?

取消单选按钮? [复制]

当我滚动列表视图单选按钮被自动选择或取消选择无法保持单选按钮的状态

当数据来自数据库时,如何一次只选择一个单选按钮并在javascript中取消选择其他单选按钮?

使用 jQuery Sortables 拖动项目时单选按钮被取消选择

从取消选择的单选按钮中删除类名