angular - 如何在 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我尝试了所有变体

标签： angular

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的完整解决方案。