Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
How to enable or disable a bunch of reactive form controls?
I want to conditionally disabled or not (enabled) a bunch of reactive form controls. However, I have noticed that neither enable or disable function has a boolean parameter to nicely conditionally disable a control (this is the solution I have seen in other frameworks to allow this, despite being quite strange to have something like disable(disabled: boolean)).
My current solution relies on dynamically invoking enable or disable function which is not the nicest solution IMO (Typescript is being used to avoid such un-ckeckable scenarios):
disableControls(disable: boolean): void {
const functionName = disable ? "disable" : "enable";
this.form.get("foo")[functionName]();
// other controls come here
}
Any idea if there is an alternative solution that plays nice with TypeScript?
1 answer
Actually, TypeScript is perfectly able to type check the code you posted. Here's what the compiler thinks:
const functionName = disable ? "disable" : "enable";
// inferred type: "disable" | "enable";
this.form.get("foo")[functionName];
// inferred type:
// FormControl["disable" | "enable"]()
// = (FormControl["disable"] | FormControl["enable"])()
// = (() => void)() | (() => void)()
// = void
If you introduce a typo, you'll get nice error message:
const functionName = disable ? "disabe" : "enable";
this.form.get("foo")[functionName]();
// error: Property 'disabe' does not exist on type 'FormControl'. Did you mean 'disable'?
Likewise if you mess up the call signature:
this.form.get("foo")[functionName](3);
// error: Expected 0 arguments, but got 1
So I'd say that your code is fine as is. If you are concerned about it's readability, you could move the conditional into a loop:
for (const fieldName of ['foo', 'bar', 'baz']) {
const control = this.form.get(fieldName);
if (disable) {
control.disable();
} else {
control.enable();
}
}
but whether this is an improvement is debatable.
Also note that if you just want to disable / enable all controls in a FormGroup or Form, you can simply disable / enable that FormGroup or Form, and it will propagate the signal to its children.
1 comment thread