Disable toggle buttons depends on all number type inputs in angular

Question

I am trying to disable toggle buttons in a form on the basis of values user put in all number type fields in that form. Let's suppose, if a form has three number type input fields (which is being created dynamically), what I want is that if a user inputs any of these three fields, toggle buttons become disable and they should be back to enable if all number type input fields have no value.
Please check the below screenshot of that form to have a general idea

Below is the code

HTML:

<form>
  <input [readonly]="!readOnlyUserForm || readOnlySpecificUserForm" type="number" (change)="onChange($event)"
    [required]=" isNE ? false : isNF ? false : arrayFormElements[i].mandatory == 'yes'  "
    *ngIf="(arrayFormElements[i].type=='real' || arrayFormElements[i].type=='integer') && 
    arrayFormElements[i].defaultvalue.length === 0 && arrayFormElements[i].name != 
    'Is_Dato_Mancante'" 
    [attr.maxlength]="numeroMax[i]" [attr.minlength]="numeroMin[i]" [(ngModel)]="numero[i]" 
    placeholder="Input" class="form-control" formControlName="valoreUtente">



                            <div [hidden]='!displayNEF'>
                                <div class="row ml-1">
                                    <b>Nessun Evento</b>
                                    <label class="switch switch-label switch-pill switch-success switch-sm float-right ml-2 ">
                                        <input type="checkbox" class="switch-input" [checked]="isNE" #switchValue
                                            (change)="loadingSwitch('NE')" [disabled]="toggleEnabled==false">
                                        <span class="switch-slider" data-checked="On" data-unchecked="Off" unchecked-class="btn-danger"></span>
                                    </label>
                                </div>
                                <div class="row ml-1">
                                    <b>Non Fornito</b>
                                    <label class="switch switch-label switch-pill switch-success switch-sm float-right ml-4">
                                        <input type="checkbox" class="switch-input" [checked]="isNF" #switchValue
                                            (change)="loadingSwitch('NF')" [disabled]="toggleEnabled==false">
                                        <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
                                    </label>
                                </div>
                            </div>

</form>

TS:

onChange(event){
        console.log(event.srcElement.type, event.srcElement.value);
        this.otherFieldValue = event.srcElement.value;
        if(this.otherFieldValue=='' || this.otherFieldValue==null){
            this.toggleEnabled = true;
        }else{
            this.toggleEnabled = false;
        }
}

*Note: What is working right now: Whenever user inputs any field, these toggle buttons become disabled and when user deletes that input, both buttons become enabled. I want to change this functionality to this extend that these buttons should disable or enable based on the values of all of these number type input fields (Let's say three) not just on a single input field. If a user inputs even one field, the buttons should be disabled but they should be enabled only when all of these number type input fields have no value. Right now, they become enabled even when one input field has no value.

I hope I am able to explain it properly.

Please suggest a possible solution to this issue. Waiting for a positive response.

Thank you

Answer 1

我通过向输入字段添加类，然后循环这些类名值来设置切换按钮