Question

我正在尝试取消选择角度为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标签。有人可以告诉我如何在角度2中取消选择单选按钮吗？

Answer 1

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

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

这会将您的电台重置为未选中状态。

Answer 2

对我而言，它的作用是：

<强> HTML：

An unhandled exception occurred while processing the request.
NodeInvocationException: Template parse errors:
Can't bind to 'ngforOf' since it isn't a known property of 'div'. (" <div class="columnOne" id="accordion" role="tablist" aria-multiselectable="true">
<div [ERROR ->]*ngfor="let item of test.testData;">
<div role="tab" id="headingone">
<"): ng:///ArrayModule/ArrayComponent.html@3:13
Property binding ngforOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("h2>
<div class="columnOne" id="accordion" role="tablist" aria-multiselectable="true">
[ERROR ->]<div *ngfor="let item of test.testData;">
<div role="tab" id="headingone">
"): ng:///ArrayModule/ArrayComponent.html@3:8

<强> TS：

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

Answer 3

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

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

Answer 4

你可以这样使用check属性：

 [checked]="condition"

<mat-radio-button *ngFor="let RadioOpt of RadioOpts" [checked]="yourCondition" 
   [value]="RadioOpt .id">{{RadioOpt .value}}</mat-radio-button>

您可以在组件中获得类似的值：

$event.target.checked

Answer 5

非物质解决方案

您可以按如下方式使用@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 上测试

取消选择单选按钮Angular 2？

5 个答案:

非物质解决方案