How to reset radio button on click reset button in Angular2+?

Question

My HTML code:

 <div class="dropdown-menu dropdown-menu-right filter-dropdown-menu  row">
     <input type="radio" class="filter-dropdown-menu-padding" (click)="filter_source_type(0)" name="gender" value="male"> Admin
     <input type="radio" class="filter-dropdown-menu-padding" (click)="filter_source_type(1)" name="gender" value="male"> Manager
     <input type="radio" class="filter-dropdown-menu-padding" (click)="filter_source_type(2)" name="gender" value="male"> Member<br>

 </div>

Reset HTML code:

<div class="btn btn-primary btn-reset" (click)="reset_filter()">Reset</div>

My ts code for reset:

reset_filter() {
this.filter_source_type_value =null;
}

Aniket kale · Accepted Answer · 2021-02-19 10:17:04Z

5

You can use ngModel for resetting radio button by assigning value null

Do this in your HTML code:

<div class="dropdown-menu dropdown-menu-right filter-dropdown-menu row">
   <input type="radio" #radio class="filter-dropdown-menu-padding" 
   [(ngModel)]="gender" (click)="filter_source_type(0)" name="gender"
   value="male"> Admin
   <input type="radio" #radio class="filter-dropdown-menu-padding" 
   [(ngModel)]="gender" (click)="filter_source_type(1)" name="gender" 
   value="female"> Manager
   <input type="radio" #radio class="filter-dropdown-menu-padding" 
   [(ngModel)]="gender" (click)="filter_source_type(2)" name="gender" 
   value="other"> Member
   <br>
</div>
<div class="btn btn-primary btn-reset" (click)="reset_filter()">Reset</div>

Do this in your .ts(component) code:

export class AppComponent {
    gender = null; // Declared property with default `null` value

    /**
     * This function is used to reset radio buttons
     */
    reset_filter() {
        this.gender = null;
    }
}

edited Feb 19, 2021 at 10:17

answered Mar 26, 2018 at 12:51

Aniket kale

6772 gold badges8 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mahin Khan Over a year ago

Worked on chrome! Thanks. But I'm still getting the radio button as selected in Safari. They are not resetting

Mahin Khan Over a year ago

I used something exactly same as your code but it wasn't working on Safari mobile. So, I used a div and shaped it like my radio buttons. and that fixed my problem.

Aniket kale Over a year ago

@Mahin Khan The above code should work in Safari too. If you can create stackblitz, that would be great to check your issue.

Dhaval kansagara · Accepted Answer · 2018-03-26 12:20:18Z

0

You can use following code in your HTML.

[(ngModel)]="filter_source_type_value"

Note: Your radio value should not be same. As per your code it should be like Admin, Manager, Member.

answered Mar 26, 2018 at 12:20

Dhaval kansagara

5615 silver badges17 bronze badges

1 Comment

Tarun.. Over a year ago

yes i am using radio button for filter in role wise. and how to use [(ngModel)] in multiple radio button input ?

Collectives™ on Stack Overflow

How to reset radio button on click reset button in Angular2+?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related