Сброс динамически созданной радиогруппы внутри таблицы в угловых 4

Question

У меня есть динамически созданная радиогруппа внутри таблицы в моем компоненте.Я использую ngFor для создания переключателей.И есть кнопка очистки снаружи ngFor.Я хочу очистить группу радио при нажатии кнопки очистки.Ниже то, что я делаю сейчас, но это работает только частично.например, если у меня есть три переключателя, я могу очистить только, если выберу первое, и не могу очистить группу радио, если выберу второе или третье радио.поэтому кто-нибудь может сказать мне, что я делаю здесь неправильно, или предложить лучший способ сделать это для моего сценария.спасибо

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

Существует метод reset () для каждого HTMLFormElement 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» НЕ сбрасывает контроль. Это все еще будет затронуто, например.

Answer 2

Вам необходимо изменить некоторые следующие изменения в вашей структуре.

<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). Установить проверенный атрибут всех радиоэлементов с одинаковым именем