Signal Forms Migration Reference

import { form, FormField, required } from '@angular/forms/signals';

@Component({
  imports: [FormField],
})

loginModel = signal({
  email: '',
  password: '',
});

loginForm = form(this.loginModel);

profileModel = signal({ name: '', email: '' });

profileForm = form(this.profileModel);

<input type="email" [formField]="loginForm.email" />
<input type="password" [formField]="loginForm.password" />

const data = this.loginModel();
const email = this.loginForm.email().value();

this.userModel.set({ name: 'Alice', email: 'alice@example.com' });
this.userForm.email().value.set('');
this.userForm.age().value.update((age) => age + 1);

preview = computed(() => this.loginForm.email().value().toLowerCase());

const city = this.userForm.address.city;

loginForm = form(this.loginModel, (schemaPath) => {
  required(schemaPath.email, { message: 'Email is required' });
  email(schemaPath.email, { message: 'Please enter a valid email address' });
});

min(schemaPath.age, 18, { message: 'You must be at least 18 years old' });
max(schemaPath.age, 120, { message: 'Please enter a valid age' });
minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' });
pattern(schemaPath.phone, /^\d{3}-\d{3}-\d{4}$/, {
  message: 'Phone must be in format: 555-123-4567',
});

validate(schemaPath.website, ({ value }) => {
  if (!value().startsWith('https://')) {
    return { kind: 'https', message: 'URL must start with https://' };
  }
  return null;
});

validate(schemaPath.confirmPassword, ({ value, valueOf }) => {
  if (value() !== valueOf(schemaPath.password)) {
    return { kind: 'passwordMismatch', message: 'Passwords do not match' };
  }
  return null;
});

validateHttp(schemaPath.username, {
  request: ({ value }) => `/api/check-username?username=${value()}`,
  onSuccess: (response) =>
    response.taken ? { kind: 'usernameTaken', message: 'Already taken' } : null,
  onError: () => ({ kind: 'networkError', message: 'Could not verify' }),
});

required(schemaPath.promoCode, {
  message: 'Promo code required',
  when: ({ valueOf }) => valueOf(schemaPath.applyDiscount),
});

// A group of rules:
applyWhen(schemaPath, ({ valueOf }) => valueOf(schemaPath.country) === 'US', (schemaPath) => {
  required(schemaPath.zipCode);
});

import { validateStandardSchema } from '@angular/forms/signals';
import * as z from 'zod';

const userSchema = z.object({
  email: z.email(),
  password: z.string().min(8),
});

userForm = form(this.userModel, (schemaPath) => {
  validateStandardSchema(schemaPath, userSchema);
});

@if (loginForm.email().touched() && loginForm.email().invalid()) {
  <ul>
    @for (error of loginForm.email().errors(); track error) {
      <li>{{ error.message }}</li>
    }
  </ul>
}

this.loginForm().valid();
this.loginForm.email().touched();
this.loginForm.email().dirty();
this.loginForm().pending();

this.loginForm().markAsTouched();

this.profileForm().reset();
this.profileModel.set({ name: '', email: '' });

import { provideSignalFormsConfig } from '@angular/forms/signals';
import { NG_STATUS_CLASSES } from '@angular/forms/signals/compat';

bootstrapApplication(App, {
  providers: [provideSignalFormsConfig({ classes: NG_STATUS_CLASSES })],
});

disabled(schemaPath.couponCode, {
  when: ({ valueOf }) => valueOf(schemaPath.total) < 50,
});

hidden(schemaPath.publicUrl, { when: ({ valueOf }) => !valueOf(schemaPath.isPublic) });
readonly(schemaPath.title, { when: ({ valueOf }) => valueOf(schemaPath.isLocked) });

// Template
@if (!profileForm.publicUrl().hidden()) {
  <input [formField]="profileForm.publicUrl" />
}

debounce(schemaPath.query, 300);

userModel = signal({ profile: { firstName: '' } });
userForm = form(this.userModel);

<input [formField]="userForm.profile.firstName" />

orderForm = form(this.orderModel, (schemaPath) => {
  applyEach(schemaPath.items, (item) => {
    required(item.name);
    min(item.quantity, 1);
  });
});

add() {
  this.orderModel.update((o) => ({ ...o, items: [...o.items, { name: '', quantity: 1 }] }));
}

// Template
@for (item of orderForm.items; track $index) {
  <input [formField]="item.name" />
}

const nameSchema = schema<{ first: string; last: string }>((name) => {
  required(name.first);
  required(name.last);
});

userForm = form(this.userModel, (schemaPath) => {
  apply(schemaPath.name, nameSchema);
});

<form [formRoot]="contactForm">...</form>

contactForm = form(this.contactModel, (schemaPath) => {
  required(schemaPath.name);
}, {
  submission: {
    action: async (field) => {
      const result = await saveContact(field().value());
      if (result.ok) return;
      return { kind: 'serverError', message: 'Failed to submit form' };
    },
  },
});

async onSave() {
  const success = await submit(this.contactForm, async (field) => {
    const result = await saveContact(field().value());
    if (result.ok) return;
    return { kind: 'serverError', message: 'Failed to save' };
  });

  if (success) {
    // navigate, show confirmation, etc.
  }
}

action: async (field) => {
  const result = await saveContact(field().value());
  if (result.ok) return;
  return { kind: 'serverError', message: 'Failed to submit form' };
},

<button type="submit" [disabled]="contactForm().submitting()">
  @if (contactForm().submitting()) { Sending... } @else { Send }
</button>

@Component({ /* ... */ })
export class RatingInput implements FormValueControl<number> {
  value = model(0);
}

// Usage
<app-rating-input [formField]="reviewForm.rating" />

export class ToggleSwitch implements FormCheckboxControl {
  checked = model<boolean>(false);
}

import { compatForm } from '@angular/forms/signals/compat';

const user = signal({
  email: '',
  password: passwordControl, // existing FormControl
});

const f = compatForm(user);

import { SignalFormControl } from '@angular/forms/signals/compat';

emailControl = new SignalFormControl('', (p) => {
  required(p, { message: 'Email is required' });
});

form = new FormGroup({ email: this.emailControl });

<input [formField]="emailControl.fieldTree" />