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

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>

我的 ts 重置代码：

reset_filter() {
this.filter_source_type_value =null;
}

Answer 1

您可以使用ngModel通过分配值来重置单选按钮null

在您的 HTML 代码中执行此操作：

<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(component) 代码中执行此操作：

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

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