Как сделать флажок неактивным, если другой элемент управления не имеет значения, и включить, если элемент управления имеет значение в angular8 - PullRequest
Новая
       19

Как сделать флажок неактивным, если другой элемент управления не имеет значения, и включить, если элемент управления имеет значение в angular8

0 голосов
/ 30 апреля 2020

У меня есть поле флажка, где я хочу включить флажок, если другой элемент управления имеет значение. здесь у меня есть 2 элемента управления amount and update received. Если в обновлении элемента управления Received есть значение, то пользователь должен иметь возможность выполнить регистрацию / оформить заказ в поле суммы. Если запрошенный элемент управления обновления пуст / пуст, тогда флажок суммы должен оставаться отключенным и не должен позволять пользователю регистрироваться / оформлять заказ.

ДЕМО: ДЕМО

ТС: 

initEoForm() {
    this.eoInfoForm = this.FB.group({
      amount: ['', Validators.required],
      updateRequested:['']
    });
  }  


  public disableUpdate() {
    let disabled = true;
      if (this.eoInfoForm.value.updateRequested) {
        disabled = false;
        return false;
      }
    return disabled;
  }

HTML: 

<form  [formGroup]="eoInfoForm">
  <div class="row">
    <div class="col">
       <div class="custom-control custom-switch">
         {{disableUpdate()}}
                <input type="checkbox" class="custom-control-input" id="noNewBusiness"
                    formControlName="amount"  disabled="disableUpdate()">
                <label class="custom-control-label" for="noNewBusiness">Update Received</label>
            </div>
    </div>
  </div>
</form>

Чтобы увидеть, получаю ли я истинное или ложное значение в html, я попытался проверить значение {{disableUpdate()}}. Это дает истинные или ложные значения соответственно, но, хотя я получаю истину, я не могу проверить / оформить заказ.

1 Ответ

1 голос
/ 30 апреля 2020

Я немного подправил, но сделал. Вам нужно установить setAttribute () и removeAttribute (). Мне нравится избегать блоков, я предпочитаю троичный оператор. 

typing(event){
    let checkBox = document.getElementById('noNewBusiness')
    event.target.value == '' ? checkBox.setAttribute('disabled', 'true') : checkBox.removeAttribute('disabled')
  }

stackblitz

...