@angular/forms/signals

hidden

function

stablesince v22.0

Adds logic to a field to conditionally hide it. A hidden field does not contribute to the validation, touched/dirty, or other state of its parent field.

API

function hidden<TValue, TPathKind extends PathKind = PathKind.Root>(
  path: SchemaPath<TValue, 1, TPathKind>,
  config?:
    | { when?: NoInfer<LogicFn<TValue, boolean, TPathKind>> | undefined }
    | undefined,
): void;
function hidden<TValue, TPathKind extends PathKind = PathKind.Root>(
  path: SchemaPath<TValue, 1, TPathKind>,
  logic?: NoInfer<LogicFn<TValue, boolean, TPathKind>> | undefined,
): void;

function hidden<TValue, TPathKind = PathKind.Root>(path: SchemaPath<TValue, 1, TPathKind>, config?: { when?: NoInfer<LogicFn<TValue, boolean, TPathKind>> | undefined; } | undefined): void;

Adds logic to a field to conditionally hide it. A hidden field does not contribute to the validation, touched/dirty, or other state of its parent field.

If a field may be hidden it is recommended to guard it with an @if in the template:

@if (!email().hidden()) {
  <label for="email">Email</label>
  <input id="email" type="email" [control]="email" />
}

@parampathSchemaPath<TValue, 1, TPathKind>

The target path to add the hidden logic to.

@paramconfig{ when?: NoInfer<LogicFn<TValue, boolean, TPathKind>> | undefined; } | undefined

Options object containing the when condition.

when: A reactive function that returns true when the field is hidden.

@returnsvoid

function hidden<TValue, TPathKind = PathKind.Root>(path: SchemaPath<TValue, 1, TPathKind>, logic?: NoInfer<LogicFn<TValue, boolean, TPathKind>> | undefined): void;

Adds logic to a field to conditionally hide it.

@deprecated

Passing a function directly to hidden is deprecated. Use { when: ... } instead.

@parampathSchemaPath<TValue, 1, TPathKind>

@paramlogicNoInfer<LogicFn<TValue, boolean, TPathKind>> | undefined

@returnsvoid

Description

Adds logic to a field to conditionally hide it. A hidden field does not contribute to the validation, touched/dirty, or other state of its parent field.

If a field may be hidden it is recommended to guard it with an @if in the template:

@if (!email().hidden()) {
  <label for="email">Email</label>
  <input id="email" type="email" [control]="email" />
}