Making Sense of Metadata in Angular Signal Forms

A practical guide using a real weather chatbot that validates cities against an API

I’m going to walk you through metadata in Angular Signal Forms using a real project I built—a weather chatbot that checks if cities actually exist before letting you submit the form. No abstract examples, just working code solving actual problems.

Here’s what makes this interesting: the form doesn’t just validate that you typed something. It calls an API to verify the city exists in a weather database, manages the loading state while checking, caches results so you don’t hammer the server, and gives instant feedback. That’s where metadata becomes essential.

The Core Problem

Traditional validation answers simple questions: Is the field empty? Does it match this pattern? But modern forms need smarter behavior. When someone types “Barcelona, Spain,” you want to know:

• Does this city exist in your weather database?

• Are we currently checking with the server?

• Did we already validate this exact combination?

• Should we show a spinner?

Your form data is just { city: “Barcelona”, country: “Spain” }. Everything else—the validation state, the API response, the loading indicators—that’s metadata. It’s the difference between what the user entered and what you need to know about what they entered.

Starting With Basic Validation

Let’s look at the foundation. This is pure validation, no async behavior yet:

const cityNameSchema = schema<string>((path) => {
  required(path, { message: ‘City is required’ });
  minLength(path, 2, { message: ‘City must be at least 2 characters’ });
  maxLength(path, 50, { message: ‘City name is too long’ });
});

export const locationSchema = schema<WeatherLocation>((path) => {
  apply(path.city, cityNameSchema);
  apply(path.country, countryNameSchema);
});

This checks structure and format. But it doesn’t verify if Barcelona is real or if someone made it up. For that, you need to talk to an API.

Adding Real Validation

Here’s where it gets interesting. We’re going to validate cities against a weather API as the user types: