How to disable button when dynamic selected option value is zero?

Question

Im having problems with this, I hope you can help me.

I have dynamic RadioButtons which fill from service. When option 4 is selected, a combobox appears with more dynamic options and values. By default the first option is "Select an Option" with value '0'. When that ComboBox appears and the default option is '0', I need to disable the 'Continue' button. My problem is that the first time the ComboBox appears, doesn't recognize the value, So I can press the button.

This is what I have at the moment. (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>

And this is TS file.

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

Context

You should set the value of this.selItem to '0'.

Solutions

It could be done in two places:

a. When the select element appears.

And, as you described, it happens when the this.showSelect is set to true inside radioChecked.

Adding the assignment to selItem into your radioChecked function:

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

If you want to preserve a possible previous value, use:

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

Note: If you are using TypeScript < 3.7, then use || instead of the nullish coalescing operator ??:

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

b. By default, setting it as the default value.

This option will work only if it does not change with each radio option. Otherwise, the solution a. is better suited.

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