Как обрабатывать ближайший элемент на основе опции выбора в угловых 5?

Question

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

<div class="form-block" *ngFor="let applicant of consumerData;">
<div class="form-row">
<div class="form-group">
<label class="label__select-form--hidden">Type</label>                    
  <div class="select-dropdown">
    <select class="select-menu" (change)="onTypeChange($event.target.value)">
            <option value="medical">Major Medical</option>
            <option value="Others">Others</option>
        </select>
  </div>
</div>
</div>   

<div class="form-row">
  <div class="form-group">
    <label for="othersLabel">Others</label>
     <div class="form-textbox">
       <input class="form-control" id="othersLabel" name="othersLabel">
     </div>
  </div>
</div>  
</div>

Для быстрого просмотра я обновил stackblitz .

Заранее спасибо за быстрое решение.

Answer 1

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

<div class="form-block" *ngFor="let applicant of consumerData;">
<div class="form-row">
<div class="form-group">
<label class="label__select-form--hidden">Type</label>                    
  <div class="select-dropdown">
    <select class="select-menu" #v (change)="onTypeChange($event.target.value)">
            <option value="medical">Major Medical</option>
            <option value="Others">Others</option>
  </select>
  </div>
</div>
</div>   

<div class="form-row">
  <div class="form-group">
    <label for="othersLabel">Others</label>
     <div class="form-textbox">
       <input class="form-control" id="othersLabel" name="othersLabel" [disabled]="v.value=='Others'">
     </div>
  </div>
</div>  

Пример: https://stackblitz.com/edit/angular-2yuwyf