取消选中 Angular 2 中的单选按钮？

Question

我正在尝试在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)时，它返回<div>标签。有人能告诉我如何在Angular 2中取消选择单选按钮吗？

- Munna Babu

---

单选按钮不适合用于取消选择，最好使用复选框，单选按钮适用于选项之一。 - Rahul Singh

感谢@RahulSingh，但这是客户的要求。 - Munna Babu

Answer 1

使用响应式表单，我们可以使用

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

这将把您的收音机重置为未选中状态。

- Sanjay Singh

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

- borracciaBlu

---

在这里工作了！但是我需要删除“event.preventDefault();”。 - Davidson Lima

Answer 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;
}

- Steve Klock

---

第一次工作正常。更改其他单选按钮后，不再起作用。@borracciaBlue的解决方法对我帮助很大：https://dev59.com/Vabja4cB1Zd3GeqPe1qd#49122959。 - Davidson Lima

Answer 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 类仅包含 id、label 和 checked 字段。 已在 Angular 11 上进行了测试。

- Kamil Kiełczewski

Answer 5

在Angular中取消选择原生单选按钮的解决方案：

示例：

<input type="radio" name="radio5" id="radio4" class="css-checkbox" value="all" [(ngModel)]="selected" name="radioModel"/> final

<input type="radio" name="radio5" id="radio4" class="css-checkbox" value="notall" [(ngModel)]="selected" name="radioModel"/> preliminary

这是在Angular 8中的工作。

参考：

https://stackblitz.com/edit/angular-radio-uncheck-all?file=src%2Fapp%2Fapp.component.html

- Breno Gomes