[英]How to keep input disabled when the checkbox is unchecked using angular8
i have used Reactive forms in Angular8 for form binding.我在 Angular8 中使用了 Reactive forms 进行表单绑定。 Here, initially the form is disabled, and when i click on edit button, the form is enabled, but here, the input should be enabled only if the checkbox is checked, or it should be disabled.在这里,最初表单被禁用,当我单击编辑按钮时,表单被启用,但是在这里,只有在选中复选框时才应该启用输入,或者应该禁用它。
Ts: TS:
edit() {
this.form.enable()
}
restrict() {
this.form = this.FB.group({
array: this.FB.array(
this.values.map(x => this.FB.group({
boolValue: this.FB.control(x.boolValue),
datetime: [
{ value:x.datetime, disabled: !x.boolValue }]
}))
)
});
this.form.valueChanges.subscribe(data => {
this.formEdit = true;
console.log('agentSettingsInfoForm', data,this.formEdit)
})
this.w9InfoDetails.valueChanges.subscribe(data => {
this.formEdit = true;
console.log('agentSettingsInfoFormdate', data,this.formEdit)
})
}
Tweaked your code in stackblitz example here are the change you need to make in order to achieve what you expect.在 stackblitz 示例中调整了您的代码,这里是您需要进行的更改才能实现您的期望。
Wrap your whole form inside <fieldset>
and set it disabled by default.将整个表单包裹在<fieldset>
中,并默认将其设置为禁用。
<fieldset [disabled]="disabled">
<form [formGroup]= "form" (submit)="onSubmit()">
......
In component assign default value to disabled
在组件中将默认值分配给disabled
disabled = true; // set default disabled true
form: FormGroup;
selected: string[] = [];
......
Remove form disable from ngOnInit从 ngOnInit 移除表单禁用
ngOnInit() {
this.restrict();
// this.form.disable() <== remove it
}
And finally in edit method set disabled false最后在编辑方法中设置禁用假
edit() {
this.disabled = false;
// this.form.enable() <== remove this
}
Here is the stackblitz DEMO I updated your code这是我更新了您的代码的 stackblitz DEMO
Hope this solve your issue.希望这能解决您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.