Deselect radio button Angular 2?

Question

I am trying to deselect a radio button in Angular 2. I tried the following code but it doesn't help.

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

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?

Angio

radio button are not appropriate for deselection better go for a checkbox, radio is for options one or other – Illbred

Thanks @RahulSingh, but that is the client requirement – Angio

Answer 1

Using reactive forms, we can use

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

this will reset you radio to unchecked.

Dirham

Answer 2

For me what it did worked was:

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

Dicho

Worked here! But I needed to remove "event.preventDefault();". – Orrery

Answer 3

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.

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

Disfavor

Just worked at the first time. After change for other radio button, didn't work anymore. @borracciaBlue workaround just helped me a lot: https://mcmap.net/q/1611381/-deselect-radio-button-angular-2. – Orrery

Answer 4

Non-material solution

You can use @ViewChilder as follows (my code)

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

and in .ts file

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

onChange(chosenItem: FieldRadioItem, inpCheckbox: HTMLInputElement) {

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

Class FieldRadioItem contains only fields id, label and checked. Tested on Angular 11

Overabound

Answer 5

Native soluction deselect radio button im Angular:

Example:

<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

It's work in angular 8.

Reference:

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

Lezlielg