在 Angular 4 的 Reactive 表单内的单选按钮组中有条件地禁用单选按钮 [英] Disable a radio button conditionally in a radio button group inside Reactive form in Angular 4
问题描述
我在组件中创建了一个响应式表单,并在其上定义了一些 formControls
.
现在我需要根据某些条件禁用单选按钮组中的一个单选按钮.
在创建 formControl
时我该怎么做?
PFB 代码片段:
createForm() {this.heroForm = this.fb.group({ConfirmActionRadioGrp: this.fb.group({updateAction: new FormControl({ value: '' })})});}
在我的模板中:
<input type="radio" class="custom-control-input" value="1" formControlName="updateAction"><input type="radio" class="custom-control-input" value="2" formControlName="updateAction"><input type="radio" class="custom-control-input" value="3" formControlName="updateAction"></div>现在如何有条件地禁用其中之一?使用 [disable]
属性时,我在浏览器控制台中收到一些警告.Angular 不鼓励这样做
解决方案 忽略浏览器警告并在输入中使用 disabled 属性.如果您愿意,可以使用:
[attr.disabled]="whatever"
相反,这应该使警告静音.根据此未解决的问题,Angular 反应式表单目前不支持通过 formcontrol/formgroup API 禁用组中的单个单选按钮:
https://github.com/angular/angular/issues/11763
I have a reactive form created in component and some formControls
defined on it.
Now i need to disable one of the radio button from a radio button group based on some condition.
How do i do it while creating formControl
?
PFB the code snippet:
createForm() {
this.heroForm = this.fb.group({
confirmActionRadioGrp: this.fb.group({
updateAction: new FormControl({ value: '' })
})
});
}
inside my template:
<div class="form-group confirm-action-radio-container" formGroupName="confirmActionRadioGrp">
<input type="radio" class="custom-control-input" value="1" formControlName="updateAction">
<input type="radio" class="custom-control-input" value="2" formControlName="updateAction">
<input type="radio" class="custom-control-input" value="3" formControlName="updateAction"></div>
Now how to disable one of them conditionally? when using [disable]
attribute i get some warning in browser console. Angular doesn't encourage doing it
解决方案 Ignore the browser warning and use the disabled attribute on the input. If you'd like you can use :
[attr.disabled]="whatever"
instead which should silence the warning. Angular reactive forms do not currently support disabling individual radio buttons in a group through the formcontrol / formgroup API as per this open issue:
https://github.com/angular/angular/issues/11763
这篇关于在 Angular 4 的 Reactive 表单内的单选按钮组中有条件地禁用单选按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文