Question

我的HTML代码：

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

重置HTML代码：

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

我的重置代码：

reset_filter() {
this.filter_source_type_value =null;
}

Answer 1

您可以使用ngModel通过赋值null

来重置单选按钮

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

和ts代码：

export class AppComponent {
  gender = null;

  reset_filter() {
   this.gender = null;
  }
 }

Answer 2

您可以在HTML中使用以下代码。

[(ngModel)]="filter_source_type_value"

注意：您的无线电值不应相同。根据您的代码，它应该像Admin，Manager，Member。

如何重置Angular2 +中点击重置按钮的单选按钮？

2 个答案: