DEV Community: margaret ogbor

Cross Field Validation With Angular Signal Forms

margaret ogbor — Mon, 10 Aug 2026 07:49:22 +0000

For many forms, a single field validation is enough. But what happens when the validation of one field is dependent on the value of another field?

When working with Angular, cross field validation allows you handle these kind of scenarios.

Take a flight booking form for example, you may want to ensure that your users do not accidentally select an invalid date range such as choosing a departure date that comes after a return date. Or you might want to prevent them from selecting same airport for departure and arrival.

These are situations where validating individual fields is not enough. Instead, you need to validate the relationship between multiple fields.
This is where cross validation becomes a useful tool.

The Flight Booking Example

To demonstrate this, we'll create a simple flight booking form.
The form will let users select a departure airport, an arrival airport, a departure date, and an optional return date.

We'll then implement two validation rules:

The departure and arrival airports cannot be the same.
The return date must always be after the departure date.

Creating our form model

Our form model tells us what our form will look like:

export interface Booking {
  departure: string;
  arrival: string;
  departureDate: Date;
  returnDate: Date;
  returning: boolean
}

Defining the Form Model

We define our form model using Angular signal. Creating an initial state for the form by assigning a default value to each field.

 private bookingModel = signal<Booking>({
    departure: '',
    departureDate: new Date(),
    arrival: '',
    returnDate: new Date(),
    returning: false,
  });

Creating Our form

With our form model ready, we can now create our form using the form() function.

To validate the date fields, Angular provides us with the validate() function. The validate() callback gives us access to value() which returns the value of the current field and valueOf() which returns the value of another field in the form .

In the code snippet below, we're validating the returnDate field while also reading the value of departureDate. This allows us compare and determine if both fields are valid before submission.

bookingForm = form(this.bookingModel, (schema) => {
    validate(schema.returnDate, ({ value, valueOf }) => {
      const returnDate = value();
      const departureDate = valueOf(schema.departureDate);
      if (!returnDate || !departureDate) {
        return null;
      }

      if (returnDate <= departureDate) {
        return {
          kind: 'invalidDateRange',
          message: 'Return date must be after the departure date',
        };
      }
      return null;
    });
    hidden(schema.returnDate, {
      when: ({ valueOf }) => {
        return !valueOf(schema.returning);
      },
    });
  });

How the Validation Works

Before comparing the dates, we check if both fields have values. If either field is empty, we return null because there isn't a date range to validate yet.

Once both date fields have values, we compare them. If the return date is the same or comes before departure date, we return a validation error object, else we return null so users know the validation has passed.

The error validation object contains the following properties:

The kind property tells the kind of validation error
The message property is text that can be conveyed to user
Returning null means that the value is returned and Angular sees the field as valid

Building The Template

With our form ready, it is time to build the template. We'll create the form fields and bind them to the fieldTree using the [formField] directive.
In order to display the error messages, we'll loop through the returnDate error array and render each error message accordingly.

<form (submit)="submitForm($event)">
  <div class="departure">
    <div class="airport">
      <label for="from">From:</label>
      <select id="from" [formField]="bookingForm.departure">
        <option value="">Select departure</option>
        @for (airport of departureAirport(); track airport.id) {
          <option [value]="airport.id"> {{ airport.airport }} ({{airport.code}})</option>
        }
      </select>
    </div>
    <div class="date">
      <label for="departureDate">Date:</label>
      <input type="date" id="departureDate" [formField]="bookingForm.departureDate">
    </div>
  </div>
  <div class="arrival">
    <div class="destination">
      <div class="airport">
        <label for="to">To:</label>
        <select id="to" [formField]="bookingForm.arrival">
          <option value="">Select destination</option>
          @for (airport of arrivalAirport(); track airport.id) {
            <option [value]="airport.id"> {{ airport.airport }} ({{airport.code}})</option>
          }
        </select>
      </div>
    </div>
  </div>
  <div class="date">
    <div class="returning">
      <input type="checkbox" id="returning" [formField]="bookingForm.returning">
      Return?
    </div>
    @if (!bookingForm.returnDate().hidden()) {
      <input type="date" id="return Date" [formField]="bookingForm.returnDate">
      @for (error of bookingForm.returnDate().errors(); track $index) {
        <p class="error">{{error.message}}</p>
      }
    }
  </div>
  <button
    type="submit"
    [disabled]="bookingForm().invalid()">
    Search Flights
  </button>
</form>

Here's how the working solution behaves:

In conclusion, we've ensured that our users can't select an invalid date range. We also explored how Angular Signal Forms simplifies cross-field validation with validate() and valueOf().

🔗 Live Demo & Source Code ⭐
Cross Field Validation Demo

Submitting a Dynamic Registration Form with Angular Signal Forms

margaret ogbor — Wed, 15 Jul 2026 08:14:39 +0000

In our previous blog post, we created a Dynamic Form using angular signal forms, that displayed different fields based on the selected account type.
In this blog post we will be looking at how we can submit our data to the backend, transforming our form model into the payload our backend expects, allowing our UI and API to have different data structures when needed.

Why transform our form data?

We designed our registration form based on what our user interface requirements were and not on the shape of our backend API.

export interface userAccount {
  account: {
    type: 'individual' | 'business';
    individual: {
      firstName: string;
      lastName: string;
    },
    business: {
      companyName: string;
      taxId: string;
      registrationNumber: string;
    }
  }
}

But what if our backend expects a totally different shape for our payload? For example:

export interface CreateAccountReq {
  accountType: 'individual' | 'business';
  firstName?: string;
  lastName?: string;
  companyName?: string;
  taxId?: string;
  registrationNumber?: string;
}

Instead of forcing our form model to match our backend request model, Angular recommends that we design our form around our user experience and translate it into what the backend requires, when we are ready to submit our data.

Let's see how we can do that.

Transforming Form Model to Backend Model

First we create a helper function to convert form model to backend api model:

import { CreateAccountReq, userAccount } from '../models/account';

export function formToRequest( form: userAccount ): CreateAccountReq {
  if (form.account.type === 'individual') {
    return {
      accountType: 'individual',
      firstName: form.account.individual.firstName,
      lastName: form.account.individual.lastName,
    }
  }
  return {
    accountType: 'business',
    companyName: form.account.business.companyName,
    taxId: form.account.business.taxId,
    registrationNumber: form.account.business.registrationNumber,
  }
}

Submitting Form Data

Now that our helper function is ready, we make use of Angular Signal Form's submit() function. The submit function is built into the signal forms Api and helps you manage form submission lifecycles.

To submit our registrationForm, we manually create a submit method:

async onSubmit(event: Event) {
    event.preventDefault();
    const success = await submit(this.registerationForm, async (field) => {
      const backendModel = formToRequest(this.field().value());
      const result = await this.fakeBackendService.createAccount(backendModel);
      if (result.ok) return;
      return { kind: 'serverError', message: 'Failed to save' };
    });
    if (success) {
      console.log("Account details submitted Successfully ...")
    }else{
      console.log("Unable to submit data ...")
    }
  }

In angular Signal Forms, since we are not using the template's FormRoot directive to submit the form but using the manual submission:

We prevent the browser's default behavior by using the preventDefault() so we can handle submission ourselves.
We then call the Signal Form's submit() method and pass it two things:
1. The form we intend to submit.
2. A callback that contains the code we want to run.
The submit() function resolves to true if successful submission and false if errors are returned.

NB: The callback passed to submit() will only execute if all fields pass validation. If any validation errors exist, the submission is stopped and the callback will not execute.

🔗 Live Demo & Source Code ⭐

Dynamic Registration Form

References

Dynamic Form Validation with Angular Signal Forms

margaret ogbor — Wed, 08 Jul 2026 11:11:09 +0000

There are times when we might need to work on forms that show and validate fields depending on a users selected input. For example an account registration form, with two types of account:

Individual
Business

When the user selects individual, show:

First name
Last name

When the user selects business, show:

Company name
Tax ID

This means that the validation rules will likely change for every change in account type.

In this blog post, we'll see how we can dynamically validate form fields based on a users selected account type, using angular signal forms.

Setting up our form model

Our form model tells us what our form will look like and the data it will contain. We define it like so:

export interface userAccount {
  account: {
    type: 'individual' | 'business';
    individual: {
      firstName: string;
      lastName: string;
    },
    business: {
      companyName: string;
      taxId: string;
      registrationNumber: string;
    }
  }
}

Creating the `accountModel`

Next, we'll create the accountModel. This holds the initial state of our form.

According to the angular docs, when working with dynamic fields, it is a good idea to initialize every field even if some of them won't be visible initially. Not doing so causes those fields to not exist in the form field tree, making it impossible to reference and interact with them later.

  accountModel = signal<userAccount>({
    account: {
      type: 'individual',
      individual: {
        firstName: '',
        lastName: '',
      },
      business: {
        companyName: '',
        taxId: '',
        registrationNumber: '',
      },
    },
  });

Defining our form schema

Then, we'll tell the form which sections should be visible.
When the user selects Individual, we want to hide the business fields.
When the user selects Business, we want to hide the individual fields.

  accountTypeSchema = schema<userAccount>((user) => {
    // Hide individual account when user selects business.
    hidden(user.account.individual, {
      when: ({ valueOf }) => valueOf(user.account.type) === 'business',
    });
    // Hide business account when user selects individual.
    hidden(user.account.business, {
      when: ({ valueOf }) => valueOf(user.account.type) === 'individual',
    });
  });

Creating our form

Now that we have both our schema and model, we can create the form.
To create the form, we use Angular Signal's form() function, passing both accountModel and accountTypeSchema as arguments.

  registrationForm = form<userAccount>(this.accountModel, this.accountTypeSchema);

At this point, our form is ready to be used in the template.

Building the template

Since our schema already knows which part of the form should be hidden based on a users selected input, we just need to reflect that in the template of our application.
Angular signal forms, expects hidden fields to be removed from the DOM. And that's why we wrapped each section with an @if block statement.
Instead of checking the selected account type, we simply check if the section is hidden.

<form>
  <h2>Create Account</h2>
  <div>
    <label>Account Type</label>

    <div>
      <label>
        <input
          type="radio"
          value="individual"
          [formField]="registrationForm.account.type"
        />
        Individual
      </label>

      <label>
        <input
          type="radio"
          value="business"
          [formField]="registrationForm.account.type"
        />
        Business
      </label>
    </div>
  </div>

  @if (!registrationForm.account.individual().hidden()) {
    <fieldset>
      <legend>Individual Information</legend>

      <div>
        <label for="firstName">First Name</label>
        <input
          id="firstName"
          type="text"
          [formField]="registrationForm.account.individual.firstName"
        />
      </div>

      <div>
        <label for="lastName">Last Name</label>
        <input
          id="lastName"
          type="text"
          [formField]="registrationForm.account.individual.lastName"
        />
      </div>
    </fieldset>
  }

  @if (!registrationForm.account.business().hidden()) {
    <fieldset>
      <legend>Business Information</legend>

      <div>
        <label for="companyName">Company Name</label>
        <input
          id="companyName"
          type="text"
          [formField]="registrationForm.account.business.companyName"
        />
      </div>

      <div>
        <label for="taxId">Tax ID</label>
        <input
          id="taxId"
          type="text"
          [formField]="registrationForm.account.business.taxId"
        />
      </div>

      <div>
        <label for="registrationNumber">Registration Number</label>
        <input
          id="registrationNumber"
          type="text"
          [formField]="registrationForm.account.business.registrationNumber"
        />
      </div>
    </fieldset>
  }

  <button type="submit">Create Account</button>
</form>

When you run the application, you can see that switching between individual and business types automatically updates the visible section of the form with no data lost.

🔗 Live Demo & Source Code ⭐

Dynamic Form Validation with Angular Signal Forms

DEV Community: margaret ogbor

Cross Field Validation With Angular Signal Forms

The Flight Booking Example

Creating our form model

Defining the Form Model

Creating Our form

How the Validation Works

Building The Template

Submitting a Dynamic Registration Form with Angular Signal Forms

Why transform our form data?

Transforming Form Model to Backend Model

Submitting Form Data

🔗 Live Demo & Source Code ⭐

References

Dynamic Form Validation with Angular Signal Forms

Setting up our form model

Creating the accountModel

Defining our form schema

Creating our form

Building the template

🔗 Live Demo & Source Code ⭐

References

Creating the `accountModel`