feat(Form): created form disable directive

README.md

@@ -59,6 +59,32 @@ export class FooComponent {
 
 Additional form components, directives, validators etc.
 
+### Form Disabled
+
+Shorthand to disable/enable all controls in a form.
+
+Usage:
+```html
+<!-- basic usage -->
+<form [disabled]="foo">
+  <input ngModel name="username" />
+  <input ngModel name="email" />
+</form>
+
+<!-- shorthand for disabled: true -->
+<form disabled>
+  <input ngModel name="username" />
+  <input ngModel name="email" />
+</form>
+
+<!-- shorthand for disabled: false -->
+<form disabled="false">
+  <input ngModel name="username" />
+  <input ngModel name="email" />
+</form>
+
+```
+
 ### Image Input
 
 Makes a form component from an img element 

projects/ng-utils/src/form/directives/form-disabled.directive.spec.ts

@@ -0,0 +1,8 @@
+import { FormDisabledDirective } from './form-disabled.directive';
+
+describe('FormDisabledDirective', () => {
+  it('should create an instance', () => {
+    const directive = new FormDisabledDirective();
+    expect(directive).toBeTruthy();
+  });
+});

projects/ng-utils/src/form/directives/form-disabled.directive.ts

@@ -0,0 +1,47 @@
+import { Directive, Host, Input } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { difference } from '@thalesrc/js-utils/legacy';
+import { combineLatest, Observable } from 'rxjs';
+import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
+import { InputStream } from '../../utils/input-stream';
+import { Unsubscriber } from '../../utils/unsubscriber';
+
+@Directive({
+  // tslint:disable-next-line:directive-selector
+  selector: 'form:not([ngNoForm]):not([formGroup])[disabled], ng-form[disabled], [ng-form][disabled]',
+  exportAs: 'thaDisabled'
+})
+export class FormDisabledDirective extends Unsubscriber {
+  // tslint:disable-next-line:no-input-rename
+  @Input('disabled')
+  @InputStream(false)
+  private disabled$: Observable<boolean>;
+
+  constructor(
+    @Host() form: NgForm
+  ) {
+    super();
+
+    const controls$ = form.valueChanges.pipe(
+      map(Object.keys),
+      distinctUntilChanged((oldKeys, newKeys) => !difference(oldKeys, newKeys).length),
+      map(() => Object.values(form.controls))
+    );
+
+    const disabled$ = this.disabled$.pipe(
+      map((value: unknown) => value === ''
+        ? true
+        : value === 'false'
+        ? false
+        : !!value)
+    );
+
+    combineLatest([controls$, disabled$]).pipe(takeUntil(this.onDestroy$)).subscribe(([controls, readonly]) => {
+      const method = readonly ? 'disable' : 'enable';
+
+      for (const control of controls) {
+        control[method]();
+      }
+    });
+  }
+}

projects/ng-utils/src/form/directives/index.ts

@@ -0,0 +1 @@
+export * from './form-disabled.directive';

projects/ng-utils/src/form/form.module.ts

@@ -2,19 +2,28 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ImageInputModule } from './image-input';
+import { FormDisabledDirective } from './directives';
 
 const MODULES = [
   CommonModule,
   FormsModule,
   ImageInputModule,
 ];
 
+const DIRECTIVES = [
+  FormDisabledDirective
+];
+
 @NgModule({
   imports: [
     ...MODULES,
   ],
+  declarations: [
+    ...DIRECTIVES,
+  ],
   exports: [
     ...MODULES,
+    ...DIRECTIVES
   ]
 })
 export class FormModule { }

projects/ng-utils/src/form/index.ts

@@ -0,0 +1,3 @@
+export * from './form.module';
+export * from './directives/index';
+export * from './image-input/index';

projects/ng-utils/src/public-api.ts

@@ -3,7 +3,7 @@
  */
 
 export * from './advanced-route/index';
-export * from './form/image-input/index';
+export * from './form/index';
 export * from './resize/index';
 export * from './substitute/index';
 export * from './overlay/index';