如何在Angular 6中切换输入字段？

Question

我想动态切换（启用和禁用）一个或另一个<input>。

期望的行为：当用户选择Yes时，第一个<input>被启用，而第二个<input>被禁用。用户单击No时，反之亦然。

---

这是我尝试过的https://stackblitz.com/edit/angular-reactive-forms-pfacix

---

Value Selected {{}}正确记录了true和false。 所以我100％知道要分配布尔值。

但是由于某些原因，attr.disabled无法切换。仅在我第一次单击时才起作用。为什么呢？ ？ 我尝试使用disabled disable attr.disable我尝试了所有版本

Answer 1

响应式表单的优点在于，您可以轻松地捕获任何输入元素的值更改事件，同时可以更改其值/状态。因此，这是解决您的问题的方法。

订阅yesNoToggle字段的值更改事件并启用基于值的输入字段禁用

subscribeYesNoToggle() {
    this.SignupForm.get('yesNoToggle').valueChanges.subscribe(data => {

      if (data === 'false') {
        this.SignupForm.get('mustToggle1').disable();
        this.SignupForm.get('mustToggle2').enable();
      } else{
        this.SignupForm.get('mustToggle2').disable();
        this.SignupForm.get('mustToggle1').enable();
      }
    })
  }

这是stackblitz上的完整解决方案。