如何在 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

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

[(ngModel)]="filter_source_type_value"

注意：您的收音机值不应该相同。根据您的代码，它应该类似于 Admin、Manager、Member。

Answer 2

您可以使用 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;
    }
}

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

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

angular2-forms

angular