Как исправить мой Drop Down, чтобы отключить компонент в соответствии с выбором

Question

Я создаю приложение Angular и использую реактивные формы.В настоящее время я работаю с формой, которая обрабатывает несколько входов и выпадающих списков. Проблема в том, что я хотел бы отключить раскрывающийся список в соответствии с очень конкретными требованиями.

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

Проблема разбита на две части:

• 1 - есть 2 раскрывающихся списка, которые связаны между собой и представляют «часы» и «минуты», смысл в том, что если пользователь выбирает максимальный час, минуты должны быть отключены (чтоя уже сделал), подписавшись на изменение значения.

• 2- Я пытаюсь найти способ сделать то же самое, не повторяя ту же функцию, которую я делал для часов.

Это то, что у меня пока есть (первое рабочее решение)

Это в баке добавления-редактирования

 onTimeChange() {
    this.tankForm.get('hours').valueChanges.subscribe(selectedHour => {
      if (selectedHour == '124') {
        this.tankForm.get('minutesCounter').disable();
      } else {
        this.tankForm.get('minutesCounter').enable();
      }
    });
  }

И следующеекод в моем HTML.

 <div class="field">
            <div class="control">
              <label for="hours" class="label"
                >Select the hours and minutes</label
              >
              <div class="select is-test">
                <select
                  class="form-control"
                  id="hours"
                  formControlName="hours"
                  #hr
                >
                  <option value="" disabled selected>Select Hours</option>
                  <option
                    value
                    *ngFor="let index of counter(32); let i = index"
                    [value]="i * 4"
                  >
                    {{ i }}
                  </option>
                </select>
              </div>
              <div class="dropdown is-hoverable">
                <div class="select">
                  <select formControlName="minutesCounter" #min>
                    <option value="" disabled selected>Select Minutes</option>
                    <option
                      *ngFor="let minute of minutesCounter"
                      [value]="minute.id"
                      >{{ minute.minutes }}</option
                    >
                  </select>
                </div>
              </div>
            </div>

Ожидаемый результат следующий:

• Когда пользователь выбирает 0 часов и 0 минут, я хотел бы отключитьчасов и уберите (0) из выпадающего списка минут .