Отключение переключателей зависит от всех типов ввода чисел в angular - PullRequest
Новая
       13

Отключение переключателей зависит от всех типов ввода чисел в angular

0 голосов
/ 09 февраля 2020

Я пытаюсь отключить кнопки переключения в форме на основе значений, введенных пользователем во все поля числового типа в этой форме. Давайте предположим, что если форма имеет три поля ввода числового типа (которые создаются динамически), я хочу, чтобы, если пользователь вводит любое из этих трех полей, переключаемые кнопки становятся отключенными, и они должны вернуться, чтобы включить, если все числовые типы поля ввода не имеют значения.
Пожалуйста, проверьте скриншот ниже этой формы, чтобы иметь общее представление

enter image description here
Ниже приведен код

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;
        }
}

* Примечание: что работает прямо сейчас: всякий раз, когда пользователь вводит какое-либо поле, эти переключаемые кнопки становятся недоступными, а когда пользователь удаляет этот ввод, обе кнопки становятся активными. Я хочу изменить эту функциональность так, чтобы эти кнопки должны были отключаться или включаться на основе значений всех этих полей ввода числового типа (скажем, три), а не только в одном поле ввода. Если пользователь вводит хотя бы одно поле, кнопки должны быть отключены, но они должны быть включены только тогда, когда все эти поля ввода числового типа не имеют значения. Прямо сейчас они становятся активными, даже когда одно поле ввода не имеет значения.

Надеюсь, я смогу объяснить это правильно.

Пожалуйста, предложите возможное решение этой проблемы. Жду положительного ответа.

Спасибо

1 Ответ

0 голосов
/ 09 февраля 2020

Я решил эту проблему, добавив класс к полям ввода и затем установив al oop из этих значений имени класса, чтобы установить проверки на кнопках переключения

...