example: CVA

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

@@ -16,6 +16,9 @@ import { RouterLink, RouterOutlet } from '@angular/router';
  <li>
  <a routerLink="multi-page-form">Multipage form</a>
  </li>
+ <li>
+ <a routerLink="form-with-cva">Form with CVA</a>
+ </li>
  </ul>
  </nav>
  <router-outlet />

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

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

apps/example/src/app/form-with-cva/address/address.component.ts

@@ -0,0 +1,79 @@
+import { CommonModule } from '@angular/common';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ forwardRef, effect
+} from '@angular/core';
+import {
+ ControlValueAccessor,
+ FormsModule,
+ NG_VALUE_ACCESSOR
+} from '@angular/forms';
+import { createFormField, createFormGroup, SignalInputDirective, V } from '@ng-signal-forms';
+import { Address } from './address';
+
+@Component({
+ selector: 'app-address',
+ standalone: true,
+ imports: [CommonModule, SignalInputDirective, FormsModule],
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => AddressComponent),
+ multi: true
+ }
+ ],
+ template: `
+ <div>
+ <div>
+ <label>Street</label>
+ <input type="text" ngModel [formField]="formGroup.controls.street" />
+ </div>
+ <div>
+ <label>Zip</label>
+ <input type="text" ngModel [formField]="formGroup.controls.zip" />
+ </div>
+ <div>
+ <label>City</label>
+ <input type="text" ngModel [formField]="formGroup.controls.city" />
+ </div>
+ <div>
+ <label>Country</label>
+ <input type="text" ngModel [formField]="formGroup.controls.country" />
+ </div>
+ </div>`,
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AddressComponent
+ implements ControlValueAccessor {
+ onChange: any;
+ onTouched: any;
+ formGroup = createFormGroup({
+ street: createFormField(undefined as undefined | string, { validators: [V.minLength(3)] }),
+ zip: createFormField(undefined as undefined | string, { validators: [V.minLength(3)] }),
+ city: createFormField(undefined as undefined | string, { validators: [V.minLength(3)] }),
+ country: createFormField(undefined as undefined | string, { validators: [V.minLength(3)] })
+ });
+
+ change = effect(() => {
+ this.onChange(this.formGroup.value());
+ }, { allowSignalWrites: true });
+
+ registerOnChange(onChange: any): void {
+ this.onChange = onChange;
+ }
+
+ registerOnTouched(onTouched: any): void {
+ this.onTouched = onTouched;
+ }
+
+ writeValue(obj: Address): void {
+ // TODO: obj should receive values from parent
+ if (obj) {
+ this.formGroup.controls.street.value.set(obj.street);
+ this.formGroup.controls.zip.value.set(obj.zip);
+ this.formGroup.controls.city.value.set(obj.city);
+ this.formGroup.controls.country.value.set(obj.country);
+ }
+ }
+}

apps/example/src/app/form-with-cva/address/address.ts

@@ -0,0 +1,6 @@
+export interface Address {
+ street?: string;
+ zip?: string;
+ city?: string;
+ country?: string;
+}

apps/example/src/app/form-with-cva/form-with-cva.component.ts

@@ -0,0 +1,94 @@
+import { JsonPipe, NgFor, NgIf } from '@angular/common';
+import { Component, effect } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+ createFormGroup,
+ SignalInputDebounceDirective,
+ SignalInputDirective,
+ SignalInputErrorDirective,
+ withErrorComponent
+} from '@ng-signal-forms';
+import { CustomErrorComponent } from '../custom-input-error.component';
+import { AddressComponent } from './address/address.component';
+
+@Component({
+ selector: 'app-basic-form',
+ template: `
+ <div class="container">
+ <div>
+ <div>
+ <label>Name</label>
+ <input ngModel [formField]="form.controls.name" />
+ </div>
+
+ <div>
+ <label>Age</label>
+ <input type="number" ngModel [formField]="form.controls.age" />
+ </div>
+
+ <div>
+ <app-address ngModel [formField]="form.controls.address" />
+ </div>
+ </div>
+
+ <div>
+ <button (click)="reset()">Reset form</button>
+ <button (click)="prefill()">Prefill form</button>
+
+ <h3>States</h3>
+ <pre
+ >{{
+ {
+ state: form.state(),
+ dirtyState: form.dirtyState(),
+ touchedState: form.touchedState(),
+ valid: form.valid()
+ } | json
+ }}
+ </pre>
+
+ <h3>Value</h3>
+ <pre>{{ form.value() | json }}</pre>
+
+ <h3>Errors</h3>
+ <pre>{{ form.errorsArray() | json }}</pre>
+ </div>
+ </div>
+ `,
+ standalone: true,
+ imports: [
+ JsonPipe,
+ FormsModule,
+ SignalInputDirective,
+ SignalInputErrorDirective,
+ NgIf,
+ NgFor,
+ SignalInputDebounceDirective,
+ AddressComponent,
+ ],
+ providers: [withErrorComponent(CustomErrorComponent)],
+})
+export default class FormWithCvaComponent {
+ // TODO: type of address should be Address | null
+ form = createFormGroup({
+ name: 'Alice',
+ age: null as number | null,
+ // TODO: this should a form group so the initial value will be set in the form
+ // but if we make this a group now, then the user input is not emitted back to the form
+ address: { city: 'Vienna'} as any
+ });
+
+ formChanged = effect(() => {
+ console.log('form changed:', this.form.value());
+ });
+
+ reset() {
+ this.form.reset();
+ }
+
+ prefill() {
+ // TODO: improve this API to set form groups
+ this.form.controls.age.value.set(42);
+ this.form.controls.name.value.set('Bob');
+ }
+}

packages/platform/src/lib/signal-input.directive.ts

@@ -16,8 +16,8 @@ import { SIGNAL_INPUT_MODIFIER, SignalInputModifier } from "./signal-input-modif
  '[class.ng-dirty]': 'this.formField?.dirtyState() === "DIRTY"',
  '[class.ng-touched]': 'this.formField?.touchedState() === "TOUCHED"',
  '[class.ng-untouched]': 'this.formField?.touchedState() === "UNTOUCHED"',
- '[attr.disabled]': '!propagateState ? undefined : this.formField?.disabled() ? true : undefined',
- '[attr.readonly]': '!propagateState ? undefined : this.formField?.readOnly() ? true : undefined',
+ '[attr.disabled]': '!propagateState ? undefined : this.formField?.disabled?.() ? true : undefined',
+ '[attr.readonly]': '!propagateState ? undefined : this.formField?.readOnly?.() ? true : undefined',
  },
 })
 export class SignalInputDirective implements OnInit {
@@ -30,7 +30,7 @@ export class SignalInputDirective implements OnInit {
  onModelChange(value: unknown) {
  if (this.modifiers && this.modifiers.length === 1) {
  this.modifiers[0].onModelChange(value);
- } else if (this.formField) {
+ } else if (this.formField && this.formField.value.set) {
  this.formField.value.set(value);
  }
  }
@@ -67,6 +67,6 @@ export class SignalInputDirective implements OnInit {
  emitModelToViewChange: true,
  }));
 
- this.formField?.registerOnReset(value => this.model.control.setValue(value))
+ this.formField?.registerOnReset?.(value => this.model.control.setValue(value))
  }
 }