feat: add more validators

apps/example/src/app/basic-form/basic-form.component.ts

@@ -1,10 +1,10 @@
-import { Component, effect, inject } from '@angular/core';
+import { Component, effect } from '@angular/core';
 import {
-  SignalFormBuilder,
+  createFormGroup,
   SignalInputDebounceDirective,
   SignalInputDirective,
   SignalInputErrorDirective,
-  withErrorComponent,
+  withErrorComponent
 } from '@ng-signal-forms';
 import { JsonPipe, NgFor, NgIf } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -63,9 +63,7 @@ import { CustomErrorComponent } from '../custom-input-error.component';
   providers: [withErrorComponent(CustomErrorComponent)],
 })
 export default class BasicFormComponent {
-  private sfb = inject(SignalFormBuilder);
-
-  form = this.sfb.createFormGroup<{ name: string; age: number | null }>({
+  form = createFormGroup<{ name: string; age: number | null }>({
     name: 'Alice',
     age: null,
   });

apps/example/src/app/multi-page-form/multi-page.form.ts

@@ -1,25 +1,19 @@
-import {
-  V,
-  createFormField,
-  createFormGroup,
-  createInjectableSignalForm,
-} from '@ng-signal-forms';
-import { signal } from '@angular/core';
+import { createFormField, createFormGroup, createInjectableSignalForm, equalsTo, required } from '@ng-signal-forms';
 
 export const { injectSignalForm, provideSignalForm } =
   createInjectableSignalForm(() =>
     createFormGroup(() => ({
       step1: createFormGroup(() => ({
-        firstName: createFormField('', { validators: [V.required()] }),
-        lastName: createFormField('', { validators: [V.required()] }),
+        firstName: createFormField('', { validators: [required()] }),
+        lastName: createFormField('', { validators: [required()] }),
       })),
       step2: createFormGroup(() => ({
-        street: createFormField('', { validators: [V.required()] }),
+        street: createFormField('', { validators: [required()] }),
         zip: createFormField<number | undefined>(undefined, {
-          validators: [V.required(), V.equalsTo(signal(1234))],
+          validators: [required(), equalsTo(1234)],
         }),
-        city: createFormField('', { validators: [V.required()] }),
-        country: createFormField('', { validators: [V.required()] }),
+        city: createFormField('', { validators: [required()] }),
+        country: createFormField('', { validators: [required()] }),
       })),
     }))
   );

apps/example/src/app/simple-form/simple-form.component.ts

@@ -7,7 +7,7 @@ import {
   SignalInputDebounceDirective,
   SignalInputDirective,
   SignalInputErrorDirective,
-  V,
+  Validators,
   Validator,
   withErrorComponent,
 } from '@ng-signal-forms';
@@ -45,7 +45,7 @@ import { CustomErrorComponent } from '../custom-input-error.component';
             ngModel
             [formField]="form.controls.passwords.controls.password"
           />
-          
+
           @if(form.controls.passwords.hasError('minLength')) {
             <small>
                 {{ form.controls.passwords.errorMessage('minLength') }}
@@ -135,17 +135,17 @@ export default class SimpleFormComponent {
   private sfb = inject(SignalFormBuilder);
   form = this.sfb.createFormGroup(() => {
     const username = this.sfb.createFormField('', {
-      validators: [V.required(), uniqueUsername()],
+      validators: [Validators.required(), uniqueUsername()],
     });
 
     return {
       username,
       passwords: this.sfb.createFormGroup(() => {
         const password = this.sfb.createFormField('', (pw) => ({
           validators: [
-            V.required(),
+            Validators.required(),
             {
-              validator: V.minLength(5),
+              validator: Validators.minLength(5),
               disable: () => pw().toLocaleLowerCase().startsWith('rob'),
               message: ({
                 currentLength,
@@ -168,7 +168,7 @@ export default class SimpleFormComponent {
           passwordConfirmation: this.sfb.createFormField<string | undefined>(
             undefined,
             {
-              validators: [V.required(), V.equalsTo(password.value)],
+              validators: [Validators.required(), Validators.equalsTo(password.value)],
               hidden: () => {
                 return password.value() === '';
               },
@@ -181,26 +181,26 @@ export default class SimpleFormComponent {
           return [];
         },
         {
-          validators: [V.minLength(1)],
+          validators: [Validators.minLength(1)],
         }
       ),
-      
+
       team:  this.sfb.createFormGroup([
         this.sfb.createFormField(''),
         this.sfb.createFormField(''),
         this.sfb.createFormField(''),
       ]),
     };
-    
+
   });
 
   createTodo = () => {
     return this.sfb.createFormGroup<Todo>(() => {
       return {
         description: this.sfb.createFormField('', {
           validators: [
-            V.required(),
-            V.minLength(5),
+            Validators.required(),
+            Validators.minLength(5),
             todoUniqueInList(
               this.form.controls.todos.value as unknown as Signal<Todo[]>
             ),

packages/platform/src/index.ts

@@ -1,6 +1,7 @@
 import * as V from './lib/validators';
 
 export * from './lib/validation';
+export * from './lib/validators';
 export * from './lib/form-field';
 export * from './lib/form-group';
 export * from './lib/form-builder';
@@ -11,4 +12,4 @@ export * from './lib/signal-input-debounce.directive';
 export * from './lib/signal-input-modifier.token';
 export * from './lib/injectable-signal-form.token';
 
-export { V };
+export { V, V as Validators };

packages/platform/src/lib/validators/equals-to.ts

@@ -0,0 +1,22 @@
+import { isSignal, Signal } from '@angular/core';
+import { SetValidationState, ValidatorFn } from '../validation';
+
+export function equalsTo<Value>(otherValue: Value | Signal<Value>): ValidatorFn<Value> {
+  return (value: Value, setState: SetValidationState) => {
+    const other = isSignal(otherValue) ? otherValue() : otherValue;
+    const valid = value == null || value === undefined || value === other;
+
+    if (valid) {
+      setState('VALID');
+    } else {
+      setState('INVALID', {
+        equalsTo: {
+          details: {
+            otherValue: other,
+            currentValue: value
+          }
+        }
+      });
+    }
+  };
+}

packages/platform/src/lib/validators/index.ts

@@ -0,0 +1,9 @@
+export * from './equals-to';
+export * from './length';
+export * from './max';
+export * from './max-length';
+export * from './min';
+export * from './min-length';
+export * from './pattern';
+export * from './required';
+export * from './required-true';

packages/platform/src/lib/validators/length.ts

@@ -0,0 +1,21 @@
+import { SetValidationState, ValidatorFn } from '../validation';
+
+export function length(length: number): ValidatorFn<string | Array<unknown>> {
+  return (value: string | Array<unknown>, setState: SetValidationState) => {
+    const valid =
+      value === null || value === undefined || value.length === length;
+
+    if (valid) {
+      setState('VALID');
+    } else {
+      setState('INVALID', {
+        length: {
+          details: {
+            currentLength: value.length,
+            length: length
+          }
+        }
+      });
+    }
+  };
+}

packages/platform/src/lib/validators/max-length.ts

@@ -0,0 +1,21 @@
+import { SetValidationState, ValidatorFn } from '../validation';
+
+export function maxLength(length: number): ValidatorFn<string | Array<unknown>> {
+  return (value: string | Array<unknown>, setState: SetValidationState) => {
+    const valid =
+      value === null || value === undefined || value.length <= length;
+
+    if (valid) {
+      setState('VALID');
+    } else {
+      setState('INVALID', {
+        minLength: {
+          details: {
+            currentLength: value.length,
+            maxLength: length
+          }
+        }
+      });
+    }
+  };
+}

packages/platform/src/lib/validators/max.ts

@@ -0,0 +1,21 @@
+import { SetValidationState, ValidatorFn } from '../validation';
+
+export function max(maxValue: number): ValidatorFn<string | Array<unknown>> {
+  return (value: number | unknown, setState: SetValidationState) => {
+    const valid =
+      value === null || value === undefined || typeof value !== 'number' || value <= maxValue;
+
+    if (valid) {
+      setState('VALID');
+    } else {
+      setState('INVALID', {
+        max: {
+          details: {
+            current: value,
+            max: maxValue
+          }
+        }
+      });
+    }
+  };
+}

packages/platform/src/lib/validators/min-length.ts

@@ -0,0 +1,21 @@
+import { SetValidationState, ValidatorFn } from '../validation';
+
+export function minLength(length: number): ValidatorFn<string | Array<unknown>> {
+  return (value: string | Array<unknown>, setState: SetValidationState) => {
+    const valid =
+      value === null || value === undefined || value.length >= length;
+
+    if (valid) {
+      setState('VALID');
+    } else {
+      setState('INVALID', {
+        minLength: {
+          details: {
+            currentLength: value.length,
+            minLength: length
+          }
+        }
+      });
+    }
+  };
+}

packages/platform/src/lib/validators/min.ts

@@ -0,0 +1,21 @@
+import { SetValidationState, ValidatorFn } from '../validation';
+
+export function min(minValue: number): ValidatorFn<string | Array<unknown>> {
+  return (value: number | unknown, setState: SetValidationState) => {
+    const valid =
+      value === null || value === undefined || typeof value !== 'number' || value >= minValue;
+
+    if (valid) {
+      setState('VALID');
+    } else {
+      setState('INVALID', {
+        min: {
+          details: {
+            current: value,
+            min: minValue
+          }
+        }
+      });
+    }
+  };
+}

packages/platform/src/lib/validators/pattern.ts

@@ -0,0 +1,12 @@
+import { SetValidationState, ValidatorFn } from '../validation';
+
+export function pattern(regexp: RegExp): ValidatorFn {
+  return (value: unknown, setState: SetValidationState) => {
+    const valid = value === null || value === undefined || typeof value !== 'string' || regexp.test(value);
+    if (valid) {
+      setState('VALID');
+    } else {
+      setState('INVALID', { pattern: { details: { pattern: regexp, currentValue: value } } });
+    }
+  };
+}

packages/platform/src/lib/validators/required-true.ts

@@ -0,0 +1,12 @@
+import { SetValidationState, ValidatorFn } from '../validation';
+
+export function requiredTrue(): ValidatorFn {
+  return (value: unknown, setState: SetValidationState) => {
+    const valid = value === true;
+    if (valid) {
+      setState('VALID');
+    } else {
+      setState('INVALID', { requiredTrue: { details: true } });
+    }
+  };
+}

packages/platform/src/lib/validators/required.ts

@@ -0,0 +1,12 @@
+import { SetValidationState, ValidatorFn } from '../validation';
+
+export function required(): ValidatorFn {
+  return (value: unknown, setState: SetValidationState) => {
+    const valid = value !== null && value !== undefined && value !== '';
+    if (valid) {
+      setState('VALID');
+    } else {
+      setState('INVALID', { required: { details: true } });
+    }
+  };
+}