fix: 🐛 fix type of status$ property

✅ Closes: #113

Author: NetanelBasal

libs/reactive-forms/src/lib/core.ts

@@ -21,17 +21,19 @@ export function controlValueChanges$<T>(
   ) as Observable<T>;
 }
 
-export function controlStatus$(
+export type ControlState = 'VALID' | 'INVALID' | 'PENDING' | 'DISABLED';
+
+export function controlStatus$<K extends 'disabled' | 'enabled' | 'status'>(
   control: AbstractControl,
-  type: 'disabled' | 'enabled' | 'status'
-): Observable<boolean> {
+  type: K
+): Observable<K extends 'status' ? ControlState : boolean> {
   return merge(
     defer(() => of(control[type])),
     control.statusChanges.pipe(
       map(() => control[type]),
       distinctUntilChanged()
     )
-  ) as Observable<boolean>;
+  ) as Observable<any>;
 }
 
 export function enableControl(

libs/reactive-forms/src/lib/form-array.spec.ts

@@ -1,6 +1,7 @@
 import { expectTypeOf } from 'expect-type';
 import { Observable, of, Subject, Subscription } from 'rxjs';
 import { FormControl, FormGroup } from '..';
+import { ControlState } from './core';
 import { FormArray } from './form-array';
 
 type Base = {
@@ -32,7 +33,7 @@ describe('FormArray Types', () => {
 
     expectTypeOf(arr.disabled$).toEqualTypeOf<Observable<boolean>>();
     expectTypeOf(arr.enabled$).toEqualTypeOf<Observable<boolean>>();
-    expectTypeOf(arr.status$).toEqualTypeOf<Observable<boolean>>();
+    expectTypeOf(arr.status$).toEqualTypeOf<Observable<ControlState>>();
 
     const first$ = arr.select((state) => {
       expectTypeOf(state).toEqualTypeOf<string[]>();

libs/reactive-forms/src/lib/form-array.ts

@@ -24,9 +24,9 @@ import { DeepPartial } from './types';
 export class FormArray<
   T,
   Control extends AbstractControl = T extends Record<any, any>
-    ? FormGroup<ControlsOf<T>>
-    : FormControl<T>
-> extends NgFormArray {
+  ? FormGroup<ControlsOf<T>>
+  : FormControl<T>
+  > extends NgFormArray {
   readonly value!: T[];
   readonly valueChanges!: Observable<T[]>;
 
@@ -41,8 +41,8 @@ export class FormArray<
     .asObservable()
     .pipe(distinctUntilChanged());
   readonly value$ = controlValueChanges$<T[]>(this);
-  readonly disabled$: Observable<boolean> = controlStatus$(this, 'disabled');
-  readonly enabled$: Observable<boolean> = controlStatus$(this, 'enabled');
+  readonly disabled$ = controlStatus$(this, 'disabled');
+  readonly enabled$ = controlStatus$(this, 'enabled');
   readonly status$ = controlStatus$(this, 'status');
   readonly errors$ = controlErrorChanges$(
     this,

libs/reactive-forms/src/lib/form-control.spec.ts

@@ -1,6 +1,7 @@
 import { Validators } from '@angular/forms';
 import { expectTypeOf } from 'expect-type';
 import { Observable, of, Subject, Subscription } from 'rxjs';
+import { ControlState } from './core';
 import { FormControl } from './form-control';
 
 describe('FormControl Functionality', () => {
@@ -201,7 +202,7 @@ describe('FormControl Types', () => {
 
     expectTypeOf(control.disabled$).toEqualTypeOf<Observable<boolean>>();
     expectTypeOf(control.enabled$).toEqualTypeOf<Observable<boolean>>();
-    expectTypeOf(control.status$).toEqualTypeOf<Observable<boolean>>();
+    expectTypeOf(control.status$).toEqualTypeOf<Observable<ControlState>>();
 
     // @ts-expect-error - should be typed
     control.reset(1);

libs/reactive-forms/src/lib/form-control.ts

@@ -35,8 +35,8 @@ export class FormControl<T> extends NgFormControl {
     .asObservable()
     .pipe(distinctUntilChanged());
   readonly value$ = controlValueChanges$<T>(this);
-  readonly disabled$: Observable<boolean> = controlStatus$(this, 'disabled');
-  readonly enabled$: Observable<boolean> = controlStatus$(this, 'enabled');
+  readonly disabled$ = controlStatus$(this, 'disabled');
+  readonly enabled$ = controlStatus$(this, 'enabled');
   readonly status$ = controlStatus$(this, 'status');
   readonly errors$ = controlErrorChanges$(
     this,

libs/reactive-forms/src/lib/form-group.spec.ts

@@ -6,6 +6,7 @@ import { AbstractControl } from '@angular/forms';
 import { Observable, of, Subject, Subscription } from 'rxjs';
 import { ControlsOf } from '..';
 import { ValuesOf } from './types';
+import { ControlState } from './core';
 
 const createGroup = () => {
   return new FormGroup(
@@ -316,7 +317,7 @@ describe('FormGroup Types', () => {
 
     expectTypeOf(group.disabled$).toEqualTypeOf<Observable<boolean>>();
     expectTypeOf(group.enabled$).toEqualTypeOf<Observable<boolean>>();
-    expectTypeOf(group.status$).toEqualTypeOf<Observable<boolean>>();
+    expectTypeOf(group.status$).toEqualTypeOf<Observable<ControlState>>();
 
     const name$ = group.select((state) => {
       expectTypeOf(state).toEqualTypeOf<Base>();

libs/reactive-forms/src/lib/form-group.ts

@@ -36,8 +36,8 @@ export class FormGroup<T extends Record<string, any>> extends NgFormGroup {
     .asObservable()
     .pipe(distinctUntilChanged());
   readonly value$ = controlValueChanges$<ValuesOf<T>>(this);
-  readonly disabled$: Observable<boolean> = controlStatus$(this, 'disabled');
-  readonly enabled$: Observable<boolean> = controlStatus$(this, 'enabled');
+  readonly disabled$ = controlStatus$(this, 'disabled');
+  readonly enabled$ = controlStatus$(this, 'enabled');
   readonly status$ = controlStatus$(this, 'status');
   readonly errors$ = controlErrorChanges$(
     this,