在复选框/单选按钮上禁用Angular 11表单

我用的是Angular 11和一个表单，还有一个表单组。我的表单中有几个字段，我希望根据外部环境将其设置为启用/禁用。这适用于预期的输入字段

我在stack blitz上做了一个简单的例子：

我所做的，我有我的app-component.ts：

从“@angular/core”导入{Component，VERSION}”；
从“@angular/forms”导入{FormGroup、FormBuilder、Validators}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent{
name=“Angular”+VERSION.major；
b值=真；
解散=错误；
表格：表格组；
构造函数（私有fb:FormBuilder）{
this.buildFormGroup（this.disposed）；
}
buildFormGroup（dis:boolean）：无效{
this.form=this.fb.group({
firstCB：[
{value:this.bvalue，禁用：dis}，
[验证器。requiredTrue]
],
inputField:[{value:“Test”，禁用：dis}，[Validators.required]]
});
}
开关（）：无效{
this.disbled=！this.disbled；
console.log（“已禁用：+此.已解散”）；
this.buildFormGroup（this.disposed）；
}
}

我没有时间深入研究MatCheckbox代码，但它似乎对重新分配FormControl绑定没有反应。如果您尝试使用相同的表单（和表单控件）并简单地启用/禁用整个表单（或特定的表单控件），您将看到它被正确禁用。不确定这是否是您可以接受的解决方法

这是

尝试在AngularMaterial repo中提交一份bug报告（或者查看代码——也许它按预期工作）

Adn关于您的问题下的注释-您不应将

disabled

属性与被动表单绑定混合使用。

---

这是一种不好的做法，在开发中为应用程序提供服务时会发出警告（并且可能会导致其他问题，具体取决于您的用例）。

这是否回答了您的问题？您也可以尝试在input and mat checkbox标记中使用[disabled]=“disbled”，我使用此解决方法禁用字段，但它会在浏览器控制台中发出警告“看起来您正在将disabled属性与被动表单指令一起使用。如果在组件类中设置此控件时将disabled设置为true，则实际上会在DOM中为您设置disabled属性。我们建议使用此方法来避免“检查后更改”错误。“显然，这不是被动表单的预期方式。Thx感谢您的帮助，在我的用例中，这会有所帮助，因为只有在禁用完整表单时，这些字段才会被禁用。但仍然有奇怪的行为。我用我的表单显示一个对象的值，当对象发生变化时，我重建表单组以查看新的值。我现在已经更改了这一点，只构建了一次表单组，然后为每个控件设置新值。patchValue（）。这对我来说很有效。。。