angular / angular/angular

Allow setting enabled/disabled state of AbstractControl using a boolean value

Open
#47,916 3 comments 7 reactions 0 assignees View on GitHub
area: forms P3
Dominant language
TypeScript
Stars
101k
Forks
27.5k
Avg merge
1d 19h
Merged PRs (30d)
288

Description

### Which @angular/* package(s) are relevant/related to the feature request?

_No response_

### Description

Currently, in order to disable or enable an `AbstractControl` depending on another control's value or state, one has to use very verbose explicit code using both if/else branches of a condition:

```ts
.subscribe(value => {
if(valueMeetsCondition(value)){
this.ctrl.enable()
} else {
this.ctrl.disable()
}
});
```
or its ternary equivalent.

It would simplify the code if we could say this instead:

```ts
.subscribe(value => this.ctrl.setEnabledState(valueMeetsCondition(value)));
```

### Proposed solution

In [AbstractControl API](https://angular.io/api/forms/AbstractControl), add a pair of methods that accept a boolean value:

- `setDisabledState`

```ts
setDisabledState(isDisabled: boolean, opts: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void
```

- `setEnabledState`

```ts
setEnabledState(isEnabled: boolean, opts: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void
```

I think it's important to have a pair of companions, just like we have `valid`/`invalid`, `enabled`/`disabled` property pairs on [AbstractControl](https://angular.io/api/forms/AbstractControl#abstractcontrol) for the sake of coding convenience.

It would allow developers for a smoother migration and cleaner code without the need of negating the conditions in their existing code.

### Alternatives considered

Workarounds? Described above which I want to stop using.
Alternative solutions? Can't think of any.

Contributor guide

Open the contributing guide

Research direction

The change targets Angular's AbstractControl API; start by locating the existing enable and disable methods and reviewing their options. Done means boolean setEnabledState and setDisabledState methods are available with the proposed options and cover the conditional usage described in the issue.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
api, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.