在 angular 中的 table 内重置动态创建的无线电组 4

Question

我在组件的 table 中有一个动态创建的无线电组。我正在使用 ngFor 创建单选按钮。并且在 ngFor 外面有一个清除按钮。单击清除按钮时，我想清除无线电组。下面是我现在正在做的，但它只部分起作用。例如，如果我有三个单选按钮，我只能在 select 第一个单选按钮时清除，而在 select 第二个或第三个单选按钮时无法清除单选按钮组。所以谁能告诉我我在这里做错了什么，或者为我的场景提出更好的方法。谢谢

html:

            <table>
            <tr *ngFor="let member of members; let i = index">
              <td>
               <div class="radio-primary">
                 <input type="radio" #qwerty id="selectId{{i}}">
              </td>
                </tr>
             </table>
            <a (click)="clear()" [innerHTML]="clear"></a>

ts 文件：

@ViewChild('qwerty') qwerty: ElementRef;

       clear(): void {
          this.qwerty.nativeElement.checked = false;
   }

Answer 1

您需要修改结构中的以下一些更改。

<table>
            <tr *ngFor="let member of members; let i = index">
              <td>
               <div class="radio-primary">
                 <input type="radio id="selectId{{i}}" name="primaryRadio">
              </td>
                </tr>
             </table>
            <a (click)="clear()" [innerHTML]="clear"></a>

需要在 .TS 文件中进行以下更改：

clear(): void {
 var ele = document.getElementsByName("primaryRadio");
 for(var i=0;i<ele.length;i++) {
   var element = ele[i] as HTMLInputElement;
   element.checked = false;
  }
}

想法是，单选按钮使用相同的名称（HTML 结构）。设置所有同名radio元素的checked属性

Answer 2

每个 HTMLFormElement 都有一个 reset() 方法 https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement

HTMLFormElement.reset()

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

您可以生成一个控件数组并对其进行迭代以重置每个 FormControl。或者您定义一个 FormGroup，将每个单独的控件添加到该组，然后重置该组。

请记住，将值设置为 "false" 不会 NOT 重置控件。例如，它仍然会被触摸。

在 angular 中的 table 内重置动态创建的无线电组 4

Reset a dynamically created radio group inside a table in angular 4

html

radio

radio-group

radio-button

angular