feat: add minLengthTrimmed validator and directive with docs

Author: love1024

projects/ngx-oneforall-docs/src/app/categories/validators/pages/min-length-trimmed/demo/min-length-trimmed-demo.component.scss

@@ -0,0 +1,28 @@
+.demo-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--ng-doc-border-color);
+  border-radius: 4px;
+  margin-bottom: 2rem;
+}
+h3 {
+  margin-top: 0;
+}
+input {
+  padding: 0.5rem;
+  border: 1px solid var(--ng-doc-border-color);
+  border-radius: 4px;
+  width: 100%;
+  background: var(--ng-doc-input-bg);
+  color: var(--ng-doc-text-color);
+}
+.error {
+  color: #f44336;
+  font-size: 0.9rem;
+}
+.success {
+  color: #4caf50;
+  font-size: 0.9rem;
+}

projects/ngx-oneforall-docs/src/app/categories/validators/pages/min-length-trimmed/demo/min-length-trimmed-demo.component.ts

@@ -0,0 +1,64 @@
+import { Component } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import {
+  minLengthTrimmed,
+  MinLengthTrimmedValidator,
+} from 'ngx-oneforall/validators/min-length-trimmed';
+
+@Component({
+  selector: 'lib-min-length-trimmed-demo',
+  standalone: true,
+  imports: [ReactiveFormsModule, FormsModule, MinLengthTrimmedValidator],
+  template: `
+    <div class="demo-container">
+      <h3>Reactive Form</h3>
+      <label>
+        Enter at least 3 characters (spaces don't count):
+        <input type="text" [formControl]="control" placeholder="Type here..." />
+      </label>
+
+      @if (control.errors?.['minLengthTrimmed']; as error) {
+        <div class="error">
+          Minimum {{ error.requiredLength }} characters required. Current:
+          {{ error.actualLength }}
+        </div>
+      }
+
+      @if (control.valid && control.value) {
+        <div class="success">
+          Valid! ({{ control.value.trim().length }} characters)
+        </div>
+      }
+    </div>
+
+    <div class="demo-container">
+      <h3>Template-Driven Form</h3>
+      <label>
+        Username (min 3 characters):
+        <input
+          type="text"
+          [(ngModel)]="templateValue"
+          [minLengthTrimmed]="3"
+          #templateCtrl="ngModel"
+          placeholder="Enter username..." />
+      </label>
+
+      @if (templateCtrl.errors?.['minLengthTrimmed']; as error) {
+        <div class="error">
+          Minimum {{ error.requiredLength }} characters required. Current:
+          {{ error.actualLength }}
+        </div>
+      }
+
+      @if (templateCtrl.valid && templateCtrl.value) {
+        <div class="success">Valid username!</div>
+      }
+    </div>
+  `,
+  styleUrl: './min-length-trimmed-demo.component.scss',
+})
+export class MinLengthTrimmedDemoComponent {
+  control = new FormControl('', [minLengthTrimmed(3)]);
+  templateValue: string | null = null;
+}

projects/ngx-oneforall-docs/src/app/categories/validators/pages/min-length-trimmed/index.md

@@ -0,0 +1,55 @@
+![Bundle Size](https://deno.bundlejs.com/badge?q=ngx-oneforall/validators/min-length-trimmed&treeshake=[*]&config={"esbuild":{"external":["rxjs","@angular/core","@angular/common","@angular/forms","@angular/router"]}})
+
+`minLengthTrimmed` is a validator that trims whitespace before checking minimum length.
+
+## Usage
+
+Unlike Angular's built-in `Validators.minLength`, this validator trims the value first, preventing whitespace-only strings from passing validation.
+
+{{ NgDocActions.demo("MinLengthTrimmedDemoComponent", { container: true }) }}
+
+### Reactive Forms
+
+```typescript
+import { FormControl } from '@angular/forms';
+import { minLengthTrimmed } from 'ngx-oneforall/validators/min-length-trimmed';
+
+const control = new FormControl('', minLengthTrimmed(3));
+
+control.setValue('  ab  '); // invalid - trimmed length is 2
+control.setValue('abc');    // valid - length is 3
+```
+
+### Template-Driven Forms (Directive)
+
+```html
+<input type="text" [(ngModel)]="username" [minLengthTrimmed]="3">
+```
+
+## API
+
+`minLengthTrimmed(minLength: number): ValidatorFn`
+
+### Error Object
+
+When validation fails, returns:
+
+```typescript
+{
+  minLengthTrimmed: {
+    requiredLength: number,
+    actualLength: number
+  }
+}
+```
+
+### Behavior
+
+| Value | Min Length | Result |
+|-------|------------|--------|
+| `null` / `undefined` | any | Valid |
+| `'ab'` | 3 | Invalid (length: 2) |
+| `'  ab  '` | 3 | Invalid (trimmed length: 2) |
+| `'abc'` | 3 | Valid |
+| `'  abc  '` | 3 | Valid (trimmed length: 3) |
+| `'   '` | 1 | Invalid (trimmed length: 0) |

projects/ngx-oneforall-docs/src/app/categories/validators/pages/min-length-trimmed/ng-doc.page.ts

@@ -0,0 +1,12 @@
+import { NgDocPage } from '@ng-doc/core';
+import ValidatorsCategory from '../../ng-doc.category';
+import { MinLengthTrimmedDemoComponent } from './demo/min-length-trimmed-demo.component';
+
+const MinLengthTrimmedPage: NgDocPage = {
+  title: 'Min Length Trimmed',
+  mdFile: './index.md',
+  category: ValidatorsCategory,
+  demos: { MinLengthTrimmedDemoComponent },
+};
+
+export default MinLengthTrimmedPage;

projects/ngx-oneforall-lib/validators/min-length-trimmed/ng-package.json

@@ -0,0 +1 @@
+{ "lib": { "entryFile": "src/public_api.ts" } }

projects/ngx-oneforall-lib/validators/min-length-trimmed/src/min-length-trimmed.directive.spec.ts

@@ -0,0 +1,73 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule, NgForm } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { MinLengthTrimmedValidator } from './min-length-trimmed.directive';
+
+@Component({
+  template: `
+    <form>
+      <input
+        type="text"
+        name="test"
+        [(ngModel)]="value"
+        [minLengthTrimmed]="3" />
+    </form>
+  `,
+  imports: [FormsModule, MinLengthTrimmedValidator],
+})
+class TestHostComponent {
+  value: string | null = null;
+}
+
+describe('MinLengthTrimmedValidator Directive', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let component: TestHostComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    await fixture.whenStable();
+  });
+
+  it('should be valid for null value', async () => {
+    component.value = null;
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const form = fixture.debugElement.query(By.directive(NgForm));
+    expect(form.injector.get(NgForm).valid).toBe(true);
+  });
+
+  it('should be valid when trimmed length meets minimum', async () => {
+    component.value = '  abc  ';
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const form = fixture.debugElement.query(By.directive(NgForm));
+    expect(form.injector.get(NgForm).valid).toBe(true);
+  });
+
+  it('should be invalid when trimmed length is below minimum', async () => {
+    component.value = '  ab  ';
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const form = fixture.debugElement.query(By.directive(NgForm));
+    expect(form.injector.get(NgForm).valid).toBe(false);
+  });
+
+  it('should be invalid for whitespace-only string', async () => {
+    component.value = '     ';
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const form = fixture.debugElement.query(By.directive(NgForm));
+    expect(form.injector.get(NgForm).valid).toBe(false);
+  });
+});

projects/ngx-oneforall-lib/validators/min-length-trimmed/src/min-length-trimmed.directive.ts

@@ -0,0 +1,48 @@
+import {
+  Directive,
+  effect,
+  forwardRef,
+  input,
+  numberAttribute,
+} from '@angular/core';
+import { NG_VALIDATORS } from '@angular/forms';
+import { BaseValidator } from 'ngx-oneforall/validators/base';
+import { minLengthTrimmed } from './min-length-trimmed.validator';
+
+/**
+ * Directive that validates the trimmed minimum length of a form control's value.
+ *
+ * @example
+ * ```html
+ * <input type="text" [(ngModel)]="username" [minLengthTrimmed]="3">
+ * ```
+ */
+@Directive({
+  selector:
+    '[minLengthTrimmed][formControlName],[minLengthTrimmed][formControl],[minLengthTrimmed][ngModel]',
+  providers: [
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => MinLengthTrimmedValidator),
+      multi: true,
+    },
+  ],
+})
+export class MinLengthTrimmedValidator extends BaseValidator {
+  /**
+   * The minimum length the trimmed value must have.
+   */
+  minLengthTrimmedValue = input.required<number, number | string>({
+    alias: 'minLengthTrimmed',
+    transform: numberAttribute,
+  });
+
+  constructor() {
+    super();
+    effect(() => {
+      const length = this.minLengthTrimmedValue();
+      this.validator = minLengthTrimmed(length);
+      this.onChange?.();
+    });
+  }
+}

projects/ngx-oneforall-lib/validators/min-length-trimmed/src/min-length-trimmed.validator.spec.ts

@@ -0,0 +1,57 @@
+import { FormControl } from '@angular/forms';
+import { minLengthTrimmed } from './min-length-trimmed.validator';
+
+describe('minLengthTrimmed', () => {
+  it('should return null for null value', () => {
+    const validator = minLengthTrimmed(3);
+    expect(validator(new FormControl(null))).toBeNull();
+  });
+
+  it('should return null for undefined value', () => {
+    const validator = minLengthTrimmed(3);
+    expect(validator(new FormControl(undefined))).toBeNull();
+  });
+
+  it('should return null for non-string values', () => {
+    const validator = minLengthTrimmed(3);
+    expect(validator(new FormControl(123))).toBeNull();
+    expect(validator(new FormControl({}))).toBeNull();
+  });
+
+  it('should return null when trimmed length meets minimum', () => {
+    const validator = minLengthTrimmed(3);
+    expect(validator(new FormControl('abc'))).toBeNull();
+    expect(validator(new FormControl('abcd'))).toBeNull();
+    expect(validator(new FormControl('  abc  '))).toBeNull();
+  });
+
+  it('should return error when trimmed length is below minimum', () => {
+    const validator = minLengthTrimmed(3);
+    expect(validator(new FormControl('ab'))).toEqual({
+      minLengthTrimmed: { requiredLength: 3, actualLength: 2 },
+    });
+    expect(validator(new FormControl('  ab  '))).toEqual({
+      minLengthTrimmed: { requiredLength: 3, actualLength: 2 },
+    });
+  });
+
+  it('should return error for empty string', () => {
+    const validator = minLengthTrimmed(1);
+    expect(validator(new FormControl(''))).toEqual({
+      minLengthTrimmed: { requiredLength: 1, actualLength: 0 },
+    });
+  });
+
+  it('should return error for whitespace-only string', () => {
+    const validator = minLengthTrimmed(1);
+    expect(validator(new FormControl('   '))).toEqual({
+      minLengthTrimmed: { requiredLength: 1, actualLength: 0 },
+    });
+  });
+
+  it('should work with minLength of 0', () => {
+    const validator = minLengthTrimmed(0);
+    expect(validator(new FormControl(''))).toBeNull();
+    expect(validator(new FormControl('   '))).toBeNull();
+  });
+});

projects/ngx-oneforall-lib/validators/min-length-trimmed/src/min-length-trimmed.validator.ts

@@ -0,0 +1,48 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+import { isPresent } from 'ngx-oneforall/utils/is-present';
+
+/**
+ * Validator that checks if the trimmed control value meets a minimum length requirement.
+ * Unlike Angular's built-in `Validators.minLength`, this validator trims whitespace
+ * before calculating the length.
+ *
+ * @param minLength - The minimum length the trimmed value must have.
+ * @returns A validator function that returns an error object if invalid, or `null` if valid.
+ *
+ * @example
+ * ```typescript
+ * import { FormControl } from '@angular/forms';
+ * import { minLengthTrimmed } from 'ngx-oneforall/validators/min-length-trimmed';
+ *
+ * const control = new FormControl('', minLengthTrimmed(3));
+ * control.setValue('ab'); // invalid - only 2 characters
+ * control.setValue('  ab  '); // invalid - trimmed length is 2
+ * control.setValue('abc'); // valid - 3 characters
+ * ```
+ *
+ * @remarks
+ * - Returns `null` if the value is `null`, `undefined`, or not a string.
+ * - The error object includes `requiredLength` and `actualLength` for display purposes.
+ */
+export function minLengthTrimmed(minLength: number): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value;
+
+    if (!isPresent(value) || typeof value !== 'string') {
+      return null;
+    }
+
+    const trimmedLength = value.trim().length;
+
+    if (trimmedLength < minLength) {
+      return {
+        minLengthTrimmed: {
+          requiredLength: minLength,
+          actualLength: trimmedLength,
+        },
+      };
+    }
+
+    return null;
+  };
+}

projects/ngx-oneforall-lib/validators/min-length-trimmed/src/public_api.ts

@@ -0,0 +1,2 @@
+export * from './min-length-trimmed.validator';
+export * from './min-length-trimmed.directive';