How to provide default values for individual fields in Angular 21 Signal Forms (without UI flicker) when implementing a FormValueControl?
07:42 13 Nov 2025

We're starting to look at Angular 21's new signal-based forms that are a great improvement, but I can't find a clean way to define default values for each form field, especially when building forms for objects where multiple keys may be undefined.

What I want

Ideally, I'd like to set a default value either:

  • On the whole form, so that missing properties in the model are patched with defaults (like with a schema or options parameter)

  • Or directly on fields, so that if a field's value is undefined, the form provides a fallback until the user provides input

Examples

Here’s what I’d like to do, but I think this isn’t supported in Angular 21:

@Component({
  selector: 'signal-form-default-value-example-1',
  template: ``,
  imports: [Field]
})
export class SignalFormDefaultValueExample1 implements FormValueControl {
  public readonly value = model();
  protected readonly valueForm = form(this.value, { defaultValue: 42 }); // << would be ideal!
}

I know that I can set the default up-front in the model (works for flat values):

public readonly value = model(42);
protected readonly valueForm = form(this.value);

But for complex objects where fields may be missing, this doesn't scale:

interface Value { a?: number; b?: number }

@Component({
  selector: 'signal-form-default-value-example-3',
  template: `
             `,
  imports: [Field]
})
export class SignalFormDefaultValueExample3 implements FormValueControl {
  public readonly value = model();
  protected readonly valueForm = form(this.value, { defaultValue: { a: 17, b: 42 } }); // not supported
}

or per-field default:


What I’ve tried

  • Using effects to patch missing values, but the UI briefly shows no/default state, causing flicker. Or I get type errors when I want to pass a field to an edit component that requires a value

  • I tried to separate the value input and valueChange output and a linkedSignal in between to patch the default there - but the FormValueControl expects a value model, so I can't split input and output.

My Question

Is there any "official" or ergonomic way to provide default values for individual fields in Angular 21 signal forms, so that fields always start with a meaningful value even when the data is missing or partially undefined? If not, what are recommended patterns to work around this cleanly (without UI flicker)?

My main requirements:

  • Defaults are applied before the UI renders.
  • I can specify defaults at field level and/or globally.
  • No extraneous UI flicker from patching values after initialization.

Any suggestions or patterns welcome <3

angular typescript angular-forms angular-signals