feat: add email validator

apps/example/src/app/app.routes.ts

@@ -22,4 +22,8 @@ export const routes: Routes = [
     path: 'form-with-cva',
     loadComponent: () => import('./form-with-cva/form-with-cva.component'),
   },
+  {
+    path: 'validators',
+    loadComponent: () => import('./validators/validators.component'),
+  },
 ];

apps/example/src/app/validators/validators.component.ts

@@ -0,0 +1,63 @@
+import { Component, inject } from '@angular/core';
+import { JsonPipe } from '@angular/common';
+import {
+  createFormField,
+  createFormGroup,
+  SignalInputDebounceDirective,
+  SignalInputDirective,
+  SignalInputErrorDirective,
+  Validators,
+  withErrorComponent,
+} from '@ng-signal-forms';
+import {
+  FormBuilder,
+  FormControl,
+  FormsModule,
+  ReactiveFormsModule,
+  Validators as ReactiveFormValidators,
+} from '@angular/forms';
+import { CustomErrorComponent } from '../custom-input-error.component';
+
+@Component({
+  selector: 'validators',
+  standalone: true,
+  imports: [
+    FormsModule,
+    JsonPipe,
+    SignalInputDirective,
+    SignalInputErrorDirective,
+    SignalInputDebounceDirective,
+    // TODO - remove before PR
+    ReactiveFormsModule,
+  ],
+  template: `
+    <div>
+      <label>Email (signal form)</label>
+      <input ngModel [formField]="form.controls.email" />
+    </div>
+    <pre>{{ form.value() | json }}</pre>
+    <pre>{{ form.errorsArray() | json }}</pre>
+
+    <!-- TODO - remove reactive forms point of reference before PR -->
+    <form [formGroup]="reactiveForm">
+      <label>Email (reactive form)</label>
+      <input formControlName="email" type="text" />
+    </form>
+    <pre>{{ reactiveForm.value | json }}</pre>
+    <pre>{{ reactiveForm.errors | json }}</pre>
+    <pre>{{ reactiveForm.controls.email.errors | json }}</pre>
+  `,
+  styles: [],
+  providers: [withErrorComponent(CustomErrorComponent)],
+})
+export default class ValidatorsComponent {
+  form = createFormGroup({
+    email: createFormField('', { validators: [Validators.email()] }),
+  });
+
+  #fb = inject(FormBuilder);
+
+  reactiveForm = this.#fb.group({
+    email: new FormControl('', { validators: ReactiveFormValidators.email }),
+  });
+}

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

@@ -0,0 +1,31 @@
+import { SetValidationState, ValidatorFn } from '../validation';
+
+/**
+ * @description Email regex pattern is directly from the Angular Forms definition.
+ *              Note: other assumptions on validation differ from Angular reactive forms.
+ * @link https://github.com/angular/angular/blob/17.3.2/packages/forms/src/validators.ts#L126
+ */
+const EMAIL_REGEXP =
+  /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+
+export function email(): ValidatorFn {
+  return (value: unknown, setState: SetValidationState) => {
+    const valid =
+      value === null ||
+      value === undefined ||
+      typeof value !== 'string' ||
+      EMAIL_REGEXP.test(value);
+
+    if (valid) {
+      setState('VALID');
+    } else {
+      setState('INVALID', {
+        email: {
+          details: {
+            currentValue: value,
+          },
+        },
+      });
+    }
+  };
+}

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

@@ -1,3 +1,4 @@
+export * from './email';
 export * from './equals-to';
 export * from './length';
 export * from './max';