feat: 64 forms with craft-ng forms

RomainDood · RomainDood · commit 3b2df62d5c3a · 2026-05-13T09:06:54.000+02:00
diff --git a/apps/forms/64-form-array/eslint.config.mjs b/apps/forms/64-form-array/eslint.config.mjs
@@ -1,12 +1,16 @@
 import nx from '@nx/eslint-plugin';
 import baseConfig from '../../../eslint.config.mjs';
+const craftRules = require('@craft-ng/dev-tools/eslint-rules');
 
 export default [
   ...baseConfig,
   ...nx.configs['flat/angular'],
   ...nx.configs['flat/angular-template'],
   {
     files: ['**/*.ts'],
+     plugins: {
+      'craft-ng': craftRules,
+    },
     rules: {
       '@angular-eslint/directive-selector': [
         'error',
@@ -24,6 +28,13 @@ export default [
           style: 'kebab-case',
         },
       ],
+      'craft-ng/brand-angular-gen-deps-required': 'error',
+      'craft-ng/no-angular-inject': 'error',
+      'craft-ng/prefer-craft-http-client': 'error',
+      'craft-ng/prefer-craft-service': 'error',
+      'craft-ng/prefer-browser-boundaries': 'error',
+      'craft-ng/app-start-registry-match': 'error',
+      'craft-ng/brand-angular-deps-match': 'error',
     },
   },
   {
diff --git a/apps/forms/64-form-array/src/app/app.component.ts b/apps/forms/64-form-array/src/app/app.component.ts
@@ -1,10 +1,10 @@
 import { JsonPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { FormField } from '@angular/forms/signals';
 import {
   cEmail,
   cMinLength,
+  CraftFieldDirective,
   cRequired,
   insertForm,
   insertFormAttributes,
@@ -14,6 +14,7 @@ import {
   mutation,
   state,
   ValidatedFormValue,
+  type TargetFormField,
 } from '@craft-ng/core';
 import { ContactFormComponent } from './contact-form.component';
 
@@ -36,26 +37,25 @@ type Registration = {
   emails: Email[];
 };
 
-// 😅 I may add some helpers
-export type ContactField = ReturnType<
-  ReturnType<
-    ReturnType<
-      ReturnType<
-        InstanceType<typeof AppComponent>['registration']['form']
-      >['selectContacts']
-    >
-  >['items']
->[number];
+export type ContactFormTree = TargetFormField<
+  InstanceType<typeof AppComponent>['registration']['form'],
+  'selectContacts.selectContact'
+>;
 
 @Component({
   selector: 'app-root',
-  imports: [ReactiveFormsModule, JsonPipe, ContactFormComponent, FormField],
+  imports: [
+    ReactiveFormsModule,
+    JsonPipe,
+    ContactFormComponent,
+    CraftFieldDirective,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <main class="min-h-screen bg-slate-50 text-slate-900">
       <div class="mx-auto max-w-5xl px-6 py-12">
         <h1 class="mb-6 text-3xl font-semibold">Registration form</h1>
-        @let form = registration.form();
+        @let form = registration.form;
         <form
           class="space-y-8 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
           <section class="space-y-4">
@@ -65,17 +65,17 @@ export type ContactField = ReturnType<
               <label
                 class="flex flex-col gap-1 text-sm font-medium text-slate-700">
                 Name
-                <input class="input" type="text" [formField]="nameField" />
-                <span class="hint">
-                  @for( exception of nameField().visibleExceptions().list; track exception.code) {
+                <input class="input" type="text" [craftField]="nameField" />
+                @if(nameField.visibleFirstLeftFailedValidation(); as exception) {
+                  <span class="hint">
                     @switch(exception.code) {
                       @case('required') {
                         Name is required
                       }
                       @default never;
                     }
-                  }
-                </span>
+                  </span>
+                }
               </label>
               @let pseudoField = form.selectPseudo();
               <label
@@ -84,9 +84,9 @@ export type ContactField = ReturnType<
                 <input
                   class="input"
                   type="text"
-                  [formField]="pseudoField" />
+                  [craftField]="pseudoField" />
                 <span class="hint">
-                  @for( exception of pseudoField().visibleExceptions().list; track exception.code) {
+                  @for( exception of pseudoField.visibleExceptions().list; track exception.code) {
                     @switch(exception.code) {
                       @case('required') {
                         This field is required
@@ -105,21 +105,21 @@ export type ContactField = ReturnType<
               <h2 class="text-xl font-semibold">Contacts</h2>
               <button
                 type="button"
-                (click)="contacts().add()"
+                (click)="contacts.add()"
                 class="btn-secondary">
                 Add contact
               </button>
             </div>
 
             <div  class="space-y-4">
-              @for (contact of contacts().items(); track $index) {
+              @for (contact of contacts.items(); track $index) {
                 <app-contact-form
                   [field]="contact"
                   [index]="$index"
-                  (remove)="contacts().remove($index)"></app-contact-form>
+                  (remove)="contacts.remove($index)"></app-contact-form>
               }
             </div>
-            @for( exception of contacts().visibleExceptions().list; track exception.code) {
+            @for( exception of contacts.visibleExceptions().list; track exception.code) {
               @let code = exception.code;
               @switch(code) {
                 @case('minLength') {
@@ -134,13 +134,13 @@ export type ContactField = ReturnType<
              @let emails = form.selectEmails();
             <div class="flex items-center justify-between gap-4">
               <h2 class="text-xl font-semibold">Emails</h2>
-              <button type="button" (click)="emails().add()" class="btn-secondary">
+              <button type="button" (click)="emails.add()" class="btn-secondary">
                 Add email
               </button>
             </div>
 
             <div class="space-y-4">
-              @for (email of emails().items(); track $index) {
+              @for (email of emails.items(); track $index) {
                 <div
                   class="rounded-lg border border-slate-200 bg-slate-50/40 p-4"
                   data-testid="email-item">
@@ -152,23 +152,23 @@ export type ContactField = ReturnType<
                       type="button"
                       class="btn-danger"
                       aria-label="Remove email {{ $index + 1 }}"
-                      (click)="emails().remove($index)">
+                      (click)="emails.remove($index)">
                       Remove
                     </button>
                   </div>
 
                   <div
                     class="mt-4 grid gap-4 sm:grid-cols-2">
-                    @let relativeField = email().selectType();
+                    @let relativeField = email.selectType();
                     <label
                       class="flex flex-col gap-1 text-sm font-medium text-slate-700">
                       Type
-                      <select class="input" [formField]="relativeField">
+                      <select class="input" [craftField]="relativeField">
                         <option value="personal">Personal</option>
                         <option value="professional">Professional</option>
                         <option value="other">Other</option>
                       </select>
-                      @for(exceptions of relativeField().visibleExceptions().list; track exceptions.code) {
+                      @for(exceptions of relativeField.visibleExceptions().list; track exceptions.code) {
                         @switch(exceptions.code) {
                           @case('required') {
                             <span class="hint">This field is required</span>
@@ -177,15 +177,15 @@ export type ContactField = ReturnType<
                         }
                       }
                     </label>
-                    @let emailField = email().selectEmail();
+                    @let emailField = email.selectEmail();
                     <label
                       class="flex flex-col gap-1 text-sm font-medium text-slate-700">
                       Email
                       <input
                         class="input"
                         type="email"
-                        [formField]="emailField" />
-                        @for(exceptions of emailField().visibleExceptions().list; track exceptions.code) {
+                        [craftField]="emailField" />
+                        @for(exceptions of emailField.visibleExceptions().list; track exceptions.code) {
                           @let code= exceptions.code;
                           @switch(code) {
                             @case('required') {
@@ -207,15 +207,15 @@ export type ContactField = ReturnType<
           <div
             class="flex flex-wrap items-center justify-between gap-4 border-t border-slate-200 pt-4">
             <div class="text-sm text-slate-600">
-              <span [class.text-rose-600]="registration.form().invalid()">
-                {{ registration.form().invalid() ? 'Form incomplete' : 'Ready to submit' }}
+              <span [class.text-rose-600]="registration.form.invalid()">
+                {{ registration.form.invalid() ? 'Form incomplete' : 'Ready to submit' }}
               </span>
             </div>
-            <button type='button' (click)="registration.form().submit()" class="btn-primary">Submit</button>
+            <button type='button' (click)="registration.form.submit()" class="btn-primary">Submit</button>
           </div>
         </form>
 
-        @if (save.safeValue()) {
+        @if (save.hasValue()) {
           <section
             class="mt-6 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
             <h3 class="mb-2 text-lg font-semibold">Submitted data</h3>
diff --git a/apps/forms/64-form-array/src/app/contact-form.component.ts b/apps/forms/64-form-array/src/app/contact-form.component.ts
@@ -1,9 +1,9 @@
 import { Component, input, output } from '@angular/core';
-import { FormField } from '@angular/forms/signals';
-import { ContactField } from './app.component';
+import { CraftFieldDirective } from '@craft-ng/core';
+import { ContactFormTree } from './app.component';
 @Component({
   selector: 'app-contact-form',
-  imports: [FormField],
+  imports: [CraftFieldDirective],
   template: `
     <div
       class="rounded-lg border border-slate-200 bg-slate-50/40 p-4"
@@ -22,12 +22,12 @@ import { ContactField } from './app.component';
       </div>
 
       <div class="mt-4 grid gap-4 sm:grid-cols-2">
-        @let firstNameField = this.field()().selectFirstname();
+        @let firstNameField = this.field().selectFirstname();
         <label class="flex flex-col gap-1 text-sm font-medium text-slate-700">
           First name
-          <input class="input" type="text" [formField]="firstNameField" />
+          <input class="input" type="text" [craftField]="firstNameField" />
           @for (
-            exception of firstNameField().visibleExceptions().list;
+            exception of firstNameField.visibleExceptions().list;
             track exception.code
           ) {
             <span class="hint">
@@ -40,16 +40,16 @@ import { ContactField } from './app.component';
             </span>
           }
         </label>
-        @let lastNameField = this.field()().selectLastname();
+        @let lastNameField = this.field().selectLastname();
         <label class="flex flex-col gap-1 text-sm font-medium text-slate-700">
           Last name
           <input
             class="input"
             type="text"
-            [formField]="lastNameField" />
+            [craftField]="lastNameField" />
           <span class="hint">
             @for (
-              exception of lastNameField().visibleExceptions().list;
+              exception of lastNameField.visibleExceptions().list;
               track exception.code
             ) {
               @switch (exception.code) {
@@ -61,16 +61,16 @@ import { ContactField } from './app.component';
             }
           </span>
         </label>
-        @let relationField = this.field()().selectRelation();
+        @let relationField = this.field().selectRelation();
         <label class="flex flex-col gap-1 text-sm font-medium text-slate-700">
           Relation
           <input
             class="input"
             type="text"
-            [formField]="relationField" />
+            [craftField]="relationField" />
           <span class="hint">
             @for (
-              exception of relationField().visibleExceptions().list;
+              exception of relationField.visibleExceptions().list;
               track exception.code
             ) {
               @switch (exception.code) {
@@ -82,16 +82,16 @@ import { ContactField } from './app.component';
             }
           </span>
         </label>
-        @let emailField = this.field()().selectEmail();
+        @let emailField = this.field().selectEmail();
         <label class="flex flex-col gap-1 text-sm font-medium text-slate-700">
           Email
           <input
             class="input"
             type="email"
-            [formField]="emailField" />
+            [craftField]="emailField" />
           <span class="hint">
             @for (
-              exception of emailField().visibleExceptions().list;
+              exception of emailField.visibleExceptions().list;
               track exception.code
             ) {
               @let code = exception.code;
@@ -112,7 +112,7 @@ import { ContactField } from './app.component';
   `,
 })
 export class ContactFormComponent {
-  field = input.required<ContactField>();
+  field = input.required<ContactFormTree>();
   index = input(0);
   remove = output<void>();
 }
diff --git a/package.json b/package.json
@@ -32,7 +32,8 @@
     "@angular/platform-server": "21.2.2",
     "@angular/router": "21.2.2",
     "@angular/ssr": "21.2.1",
-    "@craft-ng/core": "^0.1.3",
+    "@craft-ng/core": "0.5.0-beta.4",
+    "@craft-ng/dev-tools": "0.5.0-beta.0",
     "@ngneat/falso": "7.2.0",
     "@ngrx/component-store": "21.0.0",
     "@ngrx/operators": "21.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
