Несколько радио-кнопок не будут работать, только первая

Question

Я новичок в кодировании и, должно быть, совершаю простую ошибку, которую не могу понять.

У моих угловых аппликаций есть два Модальных режима: первый - это форма для добавления, а второй - это правка.

Когда я использую первый модальный режим, радио-кнопка работает, но когда я пробую второй, радио-кнопки не будут работать. Как будто они были отключены.

Одна вещь, которую я заметил, - то, что, когда я использую кнопку вкладки на своей клавиатуре, радио-кнопки выбираются через клавиатуру.

Я также заметил, что, если я изменю код модального режима, у которого есть переключатель, который не работал до того, как код работал, это перевернет проблему.

Код, который «рендерится» первым, работает.

<!-- fist RadioButton -->
<div class="md-form">
  <div class="d-flex justify-content-around">
    <p>Tipo da Instituição: </p>
    <div class="custom-control custom-radio custom-control-inline">
      <input formControlName="tipoedit" type="radio" class="custom-control-input" id="publica" name="tipoedit"
        value="Publica">
      <label class="custom-control-label" for="publica">Publica</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input formControlName="tipoedit" type="radio" class="custom-control-input" id="privado" name="tipoedit"
        value="Privado">
      <label class="custom-control-label" for="publica">Privado</label>
    </div>
  </div>
  <div *ngIf="submitted && fedit.type.errors" class="invalidFeedback">
    <div *ngIf="fedit.type.errors.required">Tipo é obrigatorio</div>
  </div>
</div>

<!-- Second RadioButton -->
<div class="md-form">
  <div class="d-flex justify-content-around">
    <p>Tipo da Instituição: </p>
    <div class="custom-control custom-radio custom-control-inline">
      <input formControlName="tipo" type="radio" class="custom-control-input" id="publica" name="tipo"
        value="Publica">
      <label class="custom-control-label" for="publica">Publica</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input formControlName="tipo" type="radio" class="custom-control-input" id="privado" name="tipo"
        value="Privado">
      <label class="custom-control-label" for="privado">Privado</label>
    </div>
  </div>
  <div *ngIf="submitted && fadd.tipo.errors" class="invalidFeedback">
    <div *ngIf="fadd.tipo.errors.required">Tipo é obrigatorio</div>
  </div>
</div>

Answer 1

Кажется, проблема в ваших атрибутах for на ярлыках и в том, что у вас есть несколько элементов с одинаковыми идентификаторами. Я настоятельно рекомендую никогда не использовать два HTML-элемента с одинаковыми идентификаторами.

Попробуйте изменить идентификаторы вашего второго модального радио (что-то вроде privadoEdit / publicaEdit) и соответственно измените атрибуты for.

Кроме того, ваш первый модал имеет publica в атрибутах for вашего ярлыка, замените второй на privado

Надеюсь, это поможет