Angular 角形罐'；t使用反应形式和布尔值禁用控件（带角度材质）

我相信这很简单。 我有这个html：

选择你的开始日期
结束日期
是否继续，直到另行通知？

如果

滚动

被切换为

关闭

，我试图仅启用

结束日期

我试过这样做：

public formGroup:formGroup；
公开认购：认购；
//方便的getter，便于访问表单字段
得到f（）{
返回this.formGroup.controls；
}
建造师(
私有表单生成器：表单生成器
) {}
ngOnInit（）：void{
这个.createForm（）；
}
私有createForm（）：void{
this.formGroup=this.formBuilder.group({
startDate:新窗体控件(
this.subscription.startDate，
需要验证器
),
滚动：this.subscription.rolling，
});
this.formGroup.addControl(
“结束日期”，
新表单控件({
值：this.subscription.endDate，
禁用：this.f.rolling.value==true，
})
);
}

---

但当我切换滑块时，什么也没发生。输入始终处于禁用状态。有人知道原因吗？

由于滚动是表单的一部分，您可以按如下方式编写并尝试：

this.formGroup = this.formBuilder.group({
    startDate: new FormControl(
      this.subscription.startDate,
      Validators.required
    ),
    rolling: new FormControl(this.subscription.rolling)
  });

---

我想您忘了提及

滚动的
新表单控件（）

示例，该示例在以下位置复制和解析：

这根本行不通。您必须检测切换上的更改

首先，简化表单初始化

this.formGroup = this.formBuilder.group({
   startDate: new FormControl(this.testObject.startDate, Validators.required),
   endDate: new FormControl(this.testObject.endDate, Validators.required),
   rolling: this.testObject.rolling
});

解决这个问题有两种方法

订阅FormControl的valueChanges事件

订阅MatSlideToggle的OnChange事件

方式1：

this.formGroup.get("rolling").valueChanges.subscribe(value => {
   this.rollingChanged(value);
});

方式2：

onChange() {
   const value = this.formGroup.get("rolling").value;
   this.rollingChanged(value);
}

然后你必须做禁用工作

rollingChanged(value: boolean) {
    const control = this.formGroup.get("endDate");
    if (value) {
      control.reset();
      control.clearValidators();
      control.disable();
    } else {
      control.enable();
      control.setValidators([Validators.required]);
    }
}

---

请创建一个最小的、可复制的示例，例如StackBlitz真的会有帮助。这是否回答了您的问题？创建类或接口也可以很容易地避免rxjs订阅。

rollingChanged(value: boolean) {
    const control = this.formGroup.get("endDate");
    if (value) {
      control.reset();
      control.clearValidators();
      control.disable();
    } else {
      control.enable();
      control.setValidators([Validators.required]);
    }
}