feat(forms): port form utils from @psu/form-lib

angular.json

@@ -420,6 +420,34 @@
           "styleext": "scss"
         }
       }
+    },
+    "utils-form": {
+      "projectType": "library",
+      "root": "libs/utils/form",
+      "sourceRoot": "libs/utils/form/src",
+      "prefix": "ut",
+      "architect": {
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": ["libs/utils/form/tsconfig.lib.json", "libs/utils/form/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**", "!libs/utils/form/**"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/utils/form/jest.config.js",
+            "tsConfig": "libs/utils/form/tsconfig.spec.json",
+            "setupFile": "libs/utils/form/src/test-setup.ts"
+          }
+        }
+      },
+      "schematics": {
+        "@nrwl/angular:component": {
+          "styleext": "scss"
+        }
+      }
     }
   },
   "cli": {

libs/utils/form/README.md

+# utils-form
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test utils-form` to execute the unit tests.

libs/utils/form/jest.config.js

+module.exports = {
+  name: 'utils-form',
+  preset: '../../../jest.config.js',
+  coverageDirectory: '../../../coverage/libs/utils/form',
+  snapshotSerializers: [
+    'jest-preset-angular/AngularSnapshotSerializer.js',
+    'jest-preset-angular/HTMLCommentSerializer.js'
+  ]
+};

libs/utils/form/ng-package.json

+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

libs/utils/form/src/index.ts

+export * from './lib/disable-control/disable-control.directive';
+export * from './lib/disable-control/disable-control.module';
+export * from './lib/utils/form.utils';

libs/utils/form/src/lib/disable-control/disable-control.directive.spec.ts

+import { Component, Input } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { DisableControlDirective } from './disable-control.directive';
+
+@Component({
+  template: `
+    <input [formControl]="control" [utDisableControl]="disabled" />
+  `
+})
+class TestComponent {
+  @Input()
+  public disabled: boolean;
+  public control: FormControl;
+
+  constructor() {
+    this.control = new FormControl();
+  }
+}
+
+describe('DisableControlDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let component: TestComponent;
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule],
+      declarations: [TestComponent, DisableControlDirective]
+    });
+
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeDefined();
+  });
+
+  function getInput(): HTMLInputElement {
+    return fixture.debugElement.query(By.css('input')).nativeElement;
+  }
+
+  it('should disable input when disabled is true', () => {
+    component.disabled = true;
+    fixture.detectChanges();
+    expect(component.control.disabled).toBe(true);
+    expect(getInput().disabled).toBe(true);
+  });
+
+  it('should enable input when disabled is false', () => {
+    component.disabled = false;
+    fixture.detectChanges();
+    expect(component.control.disabled).toBe(false);
+    expect(getInput().disabled).toBe(false);
+  });
+});

libs/utils/form/src/lib/disable-control/disable-control.directive.ts

+import { Directive, Input } from '@angular/core';
+import { NgControl } from '@angular/forms';
+
+@Directive({
+  selector: '[utDisableControl]'
+})
+export class DisableControlDirective {
+  constructor(private ngControl: NgControl) {}
+
+  @Input('utDisableControl')
+  public set disableControl(condition: boolean) {
+    const action = !!condition ? 'disable' : 'enable';
+    this.ngControl.control[action]();
+  }
+}

libs/utils/form/src/lib/disable-control/disable-control.module.ts

+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { DisableControlDirective } from './disable-control.directive';
+
+@NgModule({
+  imports: [CommonModule, FormsModule, ReactiveFormsModule],
+  declarations: [DisableControlDirective],
+  exports: [DisableControlDirective]
+})
+export class DisableControlModule {}

libs/utils/form/src/lib/utils/form.utils.spec.ts

+import { FormUtils } from './form.utils';
+
+describe('FormUtils', () => {
+  describe('safeTrim', () => {
+    it('should return original value when value is falsy', () => {
+      expect(FormUtils.safeTrim(undefined)).toBeUndefined();
+    });
+
+    it('should return original value when value has no whitespace', () => {
+      expect(FormUtils.safeTrim('me')).toBe('me');
+    });
+
+    it('should trim leading and trailing whitespace', () => {
+      expect(FormUtils.safeTrim(' some  ')).toBe('some');
+    });
+  });
+});

libs/utils/form/src/lib/utils/form.utils.ts

+import { FormGroup, AbstractControl, FormArray } from '@angular/forms';
+
+export class FormUtils {
+  public static touchAllFields(group: FormGroup): void {
+    Object.keys(group.controls).forEach(controlName => {
+      const control: AbstractControl = group.get(controlName);
+      if (control instanceof FormArray) {
+        const arr = control as FormArray;
+        for (let i = 0; i < arr.length; ++i) {
+          FormUtils.touchAllFields(arr.at(i) as FormGroup);
+        }
+      } else if (control instanceof FormGroup) {
+        FormUtils.touchAllFields(control);
+      } else {
+        control.markAsTouched({ onlySelf: true });
+      }
+    });
+  }
+
+  public static safeTrim(value: string): string {
+    return value ? value.trim() : value;
+  }
+}

libs/utils/form/src/test-setup.ts

+import 'jest-preset-angular';
+import '../../../../jestGlobalMocks';

libs/utils/form/tsconfig.json

+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["node", "jest"]
+  },
+  "include": ["**/*.ts"]
+}

libs/utils/form/tsconfig.lib.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": ["dom", "es2018"]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts"]
+}

libs/utils/form/tsconfig.spec.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
+}

libs/utils/form/tslint.json

+{
+  "extends": "../../../tslint.json",
+  "rules": {
+    "directive-selector": [true, "attribute", "ut", "camelCase"],
+    "component-selector": [true, "element", "ut", "kebab-case"]
+  }
+}

nx.json

@@ -49,6 +49,9 @@
     },
     "utils-cdn": {
       "tags": []
+    },
+    "utils-form": {
+      "tags": []
     }
   }
 }

tsconfig.json

@@ -27,7 +27,8 @@
       "@psu/utils/logger": ["libs/utils/logger/src/index.ts"],
       "@psu/utils/loading-events": ["libs/utils/loading-events/src/index.ts"],
       "@psu/utils/ngrx": ["libs/utils/ngrx/src/index.ts"],
-      "@psu/utils/cdn": ["libs/utils/cdn/src/index.ts"]
+      "@psu/utils/cdn": ["libs/utils/cdn/src/index.ts"],
+      "@psu/utils/form": ["libs/utils/form/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]