CngxTypedControl

DirectivePrimaryv0.1.0WCAG AA

projects/forms/controls/typed-control.directive.ts

Info
API

Import#

import { CngxTypedControl } from '@cngx/forms/controls'

Description#

Structural helper that resolves a strongly-typed AbstractControl<T> from the enclosing FormGroup by name, so reactive-forms templates and host directives read a control without an as FormControl<T> cast at every access.

Must live inside a [formGroup] - it injects FormGroupDirective non-optionally, so outside one Angular throws NullInjectorError. As a fail-fast guard it also throws when no control matches the given name in the parent group.

Read the resolved control through the control signal, via the exportAs ref or by injecting the directive. In a template ref the generic stays unknown; pass T explicitly when injecting in TypeScript to get the narrowed control.

<form [formGroup]="form">
  <input formControlName="email" cngxTypedControl="email" #email="cngxTypedControl" />
  @if (email.control?.hasError('required')) {
    <span>Email is required</span>
  }
</form>

Metadata#

Selector: [cngxTypedControl]
Export as: cngxTypedControl

Index#

Properties

control

Inputs

cngxTypedControl

Inputs#

cngxTypedControl#string

input()Required

Name of the control to look up in the parent FormGroup.

Instance Properties#

control#unknown

Readonly

The resolved AbstractControl, or null if the name is not found.

computed<AbstractControl<T> | null>(
  () => (this.formGroupDir.form.get(this.cngxTypedControl()) as AbstractControl<T>) ?? null,
)