取消选择单选按钮Angular 2？

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：

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

Answer 3

你可以这样使用checked属性：

 [checked]="condition"

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

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

$event.target.checked