Как отключить кнопку, когда значение параметра Dynami c selected option равно нулю?

Question

У меня проблемы с этим, надеюсь, вы можете мне помочь.

У меня есть динамические c RadioButtons, которые заполняются из службы. Когда выбран вариант 4, появляется поле со списком с дополнительными динамическими c параметрами и значениями. По умолчанию первая опция - «Выбрать вариант» со значением «0». Когда появится этот ComboBox и параметр по умолчанию - «0», мне нужно отключить кнопку «Продолжить». Моя проблема в том, что при первом появлении ComboBox значение не распознается, поэтому я могу нажать кнопку.

Это то, что у меня есть на данный момент. (html)

    <div class="form-group row d-flex justify-content-center">
       <div class="card animated fadeIn" *ngIf="!loading && (!listModType.hasOwnProperty('ErrorDescription') || listModType.hasOwnProperty('error'))">
          <div class="card-body">
              <div *ngFor='let item of listModType; let idx = index'>
                   <input type="radio" id="{{ item.id }}" name="modifType" [value]="item.typeModif" 
             [ngModel]="userSelection.chosenTipoMod" (change)='radioChecked( item.id, idx )' #selectedOp="ngModel">
                    <label class="form-check-label"> &nbsp; {{ item.typeModif }} </label>
               </div>
           </div>
        </div>
    </div>

    <div class="input-group justify-content-center" *ngIf="showSelect">
        <div class="col-sm-4 col-md-4 col-lg-4">
            <select class="form-control" id="selectedItem" (change)="onOptionsSelected($event)">
                <option [value]='userSelection.chonNumItem'>
                       Select an Item
                </option>
                <option value='{{ modifItem }}' *ngFor="let modifItem of modifiedItems">
                      Item {{ modifItem }}
                </option>
            </select>
         </div>
    </div>

    <div class="row">
        <div class="col-sm-6 col-md-6 col-lg-6" style="text-align:right;">
             <button (click)="modSelection(form)" [disabled]="selItem === '0'" class="btn btn-success" id="note-button">
                  Continue
            </button>
         </div>
    </div>

А это файл TS.

export class ModificationComponent implements OnInit {

    objectItem: any;
    listModType: any = { ErrorDescription: '0' };
    modifiedItems: any = [];
    selItem: string;
    showSelect = false;
    userSelection = {
        chosenTipoMod: 'Datos de Cliente',
        chonNumItem: '0'
    };

    constructor() {
        this.searchModificationType();
        for (let i = 0; i < this.info.secures.item.length; i++) {
            this.modifiedItems.push(this.info.secures.item[i]['itemNumber']);
        }
        this.objectItem = this.modifiedItems.length;
    }

    onOptionsSelected(event: any) {
        this.selItem = event.target.value;
        console.log(this.selItem);
    }

    radioChecked(id, i) {
        this.listModType.forEach(item => {
            if (item.id === id) {
                console.log('Chosen Option', item.typeModif);
            }
            if (item.id === id && this.info.secures.item.length >= 1 && item.id === 'RB') {
                item.selected = false;
                this.showSelect = true;
                console.log('RB has been chosen');
            } else {
                item.selected = true;
                this.showSelect = false;
            }
        });
    }

}

Answer 1

Контекст

Вы должны установить значение this.selItem на '0'.

Решения

Это можно сделать в двух местах:

а. Когда появляется элемент выбора.

И, как вы описали, это происходит, когда this.showSelect установлен на true внутри radioChecked.

Добавление присваивания selItem в ваша функция radioChecked:

  ...
  this.showSelect = true;
  this.selItem = '0'; // <--
  ...

Если вы хотите сохранить возможное предыдущее значение, используйте:

  ...
  this.showSelect = true;
  this.selItem = this.selItem ?? '0'; // <--
  ...

Примечание: Если вы используете TypeScript < 3.7, затем используйте || вместо nulli sh оператора объединения ??:

this.selItem = this.selItem || '0';

b. По умолчанию установлено значение по умолчанию.

Этот параметр будет работать, только если он не изменяется с каждым параметром радио. В противном случае лучше подходит решение a..

    modifiedItems: any = [];
    selItem = '0';           // <---
    showSelect = false;