Commit 322e571e authored by Ryan Diehl's avatar Ryan Diehl

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

parent 2a251efc
......@@ -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": {
......
# utils-form
This library was generated with [Nx](https://nx.dev).
## Running unit tests
Run `nx test utils-form` to execute the unit tests.
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'
]
};
{
"lib": {
"entryFile": "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';
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);
});
});
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]();
}
}
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 {}
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');
});
});
});
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;
}
}
import 'jest-preset-angular';
import '../../../../jestGlobalMocks';
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"types": ["node", "jest"]
},
"include": ["**/*.ts"]
}
{
"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"]
}
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
"module": "commonjs",
"types": ["jest", "node"]
},
"files": ["src/test-setup.ts"],
"include": ["**/*.spec.ts", "**/*.d.ts"]
}
{
"extends": "../../../tslint.json",
"rules": {
"directive-selector": [true, "attribute", "ut", "camelCase"],
"component-selector": [true, "element", "ut", "kebab-case"]
}
}
......@@ -49,6 +49,9 @@
},
"utils-cdn": {
"tags": []
},
"utils-form": {
"tags": []
}
}
}
......@@ -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"]
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment