Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics

Dashboard
Notifications
Mark all as read
Q&A

How to enable or disable a bunch of reactive form controls?

+1
−0

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?

Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

2 comments

What do you mean with "uncheckable"? In your code, TypeScript checks that the functions exist and have the correct signature. What else do you want it to check? meriton‭ 11 days ago

Storing function names in string and dynamically invoking those functions is not actually a nice thing (the linter and the transpiler cannot check if these functions actually exist). That's why I am asking if by chance I have missed something and had to rely on such a solution. Alexei‭ 10 days ago

1 answer

+2
−0

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

Try it in the playground!

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.

Why does this post require moderator attention?
You might want to add some details to your flag.

1 comment

That playground is awesome. Also, I think that grouping the affected controls in a FormGroup makes perfect sense. Thanks. Alexei‭ 9 days ago

Sign up to answer this question »