Class FormComponentSuperclass<T>`Abstract`

Extend this when creating a form control to reduce some boilerplate.

This example allows 2-way binding to a number via [(ngModel)], [formControl], or any other technique that leverages the ControlValueAccessor interface.

@Component({
  template: `
    <button (click)="increment()" [disabled]="isDisabled">{{ counter }}</button>
  `,
  providers: [provideValueAccessor(CounterComponent)],
})
class CounterComponent extends FormComponentSuperclass<number> {
  counter = 0;

  handleIncomingValue(value: number) {
    this.counter = value;
  }

  increment() {
    this.emitOutgoingValue(++this.counter);
    this.onTouched();
  }
}

Type Parameters

Hierarchy (View Summary)

DirectiveSuperclass
- FormComponentSuperclass
  - WrappedControlSuperclass

Implements

ControlValueAccessor

Constructors

constructor

new FormComponentSuperclass<T>(value?: any): FormComponentSuperclass
Type Parameters
- T
Parameters
- Optionalvalue: any
Returns FormComponentSuperclass
Inherited from DirectiveSuperclass.constructor
- Defined in node_modules/typescript/lib/lib.es5.d.ts:156

Properties

__#7@#subscriptions

"__#7@#subscriptions": Subscription

constructor

constructor: Function

The initial value of Object.prototype.constructor is the standard built-in Object constructor.

destruction$

destruction$: Observable<void> = ...

An observable that emits once when this object is destroyed, then completes.

emitOutgoingValue

emitOutgoingValue: (value: T) => void = noop

Call this to emit a new value when it changes.

inputChanges$

inputChanges$: Subject<Set<keyof FormComponentSuperclass<T>>> = ...

@deprecated: This method may be removed in a future version. Its purpose is now handled by Angular elegantly with signals. Consider migrating to signal inputs.

Emits the set of @Input() property names that change during each call to ngOnChanges().

isDisabled

isDisabled: boolean = false

You can bind to this in your template as needed.

onTouched

onTouched: () => void = noop

Call this to "commit" a change, traditionally done e.g. on blur.

Type declaration

- (): void
- This function returns undefined.
  
  Contribution to minified bundle size, when it is the only function imported:
  - Lodash: 48 bytes
  - Micro-dash: 40 bytes
  Returns void

Methods

bindToInstance

bindToInstance<K extends keyof FormComponentSuperclass<T>>(
key: K,
value$: Observable<FormComponentSuperclass<T>[K]>,
): void
@deprecated: This method may be removed in a future version. Consider whether moving to signals will suit your needs.

Binds an observable to one of this directive's instance variables. When the observable emits the instance variable will be updated, and change detection will be triggered to propagate any changes. Use this as an alternative to repeating | async multiple times in your template.
Type Parameters
- K extends keyof FormComponentSuperclass<T>
Parameters
- key: K
- value$: Observable<FormComponentSuperclass<T>[K]>
Returns void
Inherited from DirectiveSuperclass.bindToInstance
- Defined in projects/ng-core/src/lib/directive-superclass.ts:103

getInput$

getInput$<K extends keyof FormComponentSuperclass<T>>(
key: K,
): Observable<FormComponentSuperclass<T>[K]>
@deprecated: This method may be removed in a future version. Its purpose is now handled by Angular elegantly with signals. Consider migrating to signal inputs.
Type Parameters
- K extends keyof FormComponentSuperclass<T>
Parameters
- key: K
Returns Observable<FormComponentSuperclass<T>[K]>
an observable of the values for one of this directive's @Input() properties
Inherited from DirectiveSuperclass.getInput$
- Defined in projects/ng-core/src/lib/directive-superclass.ts:82

`Abstract`handleIncomingValue

handleIncomingValue(value: T): void
Implement this to handle a new value coming in from outside.
Parameters
- value: T
Returns void
- Defined in projects/ng-core/src/lib/forms/form-component-superclass.ts:70

hasOwnProperty

hasOwnProperty(v: PropertyKey): boolean
Determines whether an object has a property with the specified name.
Parameters
- v: PropertyKey
  A property name.
Returns boolean
Inherited from DirectiveSuperclass.hasOwnProperty
- Defined in node_modules/typescript/lib/lib.es5.d.ts:140

isPrototypeOf

isPrototypeOf(v: Object): boolean
Determines whether an object exists in another object's prototype chain.
Parameters
- v: Object
  Another object whose prototype chain is to be checked.
Returns boolean
Inherited from DirectiveSuperclass.isPrototypeOf
- Defined in node_modules/typescript/lib/lib.es5.d.ts:146

manage

manage(subscription: Subscription): void
Parameters
- subscription: Subscription
Returns void
Inherited from DirectiveSuperclass.manage
- Defined in dist/rxjs-core/index.d.ts:516

ngOnChanges

ngOnChanges(changes: SimpleChanges): void
A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
Parameters
- changes: SimpleChanges
  The changed properties.
Returns void
Inherited from DirectiveSuperclass.ngOnChanges
- Defined in projects/ng-core/src/lib/directive-superclass.ts:69

propertyIsEnumerable

propertyIsEnumerable(v: PropertyKey): boolean
Determines whether a specified property is enumerable.
Parameters
- v: PropertyKey
  A property name.
Returns boolean
Inherited from DirectiveSuperclass.propertyIsEnumerable
- Defined in node_modules/typescript/lib/lib.es5.d.ts:152

registerOnChange

registerOnChange(fn: (value: T) => void): void
Called as Angular sets up the binding to this ControlValueAccessor. You normally do not need to use it.
Parameters
- fn: (value: T) => void
Returns void
Implementation of ControlValueAccessor.registerOnChange
- Defined in projects/ng-core/src/lib/forms/form-component-superclass.ts:54

registerOnTouched

registerOnTouched(fn: VoidFunction): void
Called as Angular sets up the binding to this ControlValueAccessor. You normally do not need to use it.
Parameters
- fn: VoidFunction
Returns void
Implementation of ControlValueAccessor.registerOnTouched
- Defined in projects/ng-core/src/lib/forms/form-component-superclass.ts:59

setDisabledState

setDisabledState(isDisabled: boolean): void
Called as Angular propagates disabled changes to this ControlValueAccessor. You normally do not need to use it.
Parameters
- isDisabled: boolean
Returns void
Implementation of ControlValueAccessor.setDisabledState
- Defined in projects/ng-core/src/lib/forms/form-component-superclass.ts:64

subscribeTo

subscribeTo<T>(
    observable: Observable<T>,
    next?: (value: T) => void,
    error?: (error: any) => void,
    complete?: () => void,
): void
Type Parameters
- T
Parameters
- observable: Observable<T>
- Optionalnext: (value: T) => void
- Optionalerror: (error: any) => void
- Optionalcomplete: () => void
Returns void
Inherited from DirectiveSuperclass.subscribeTo
- Defined in dist/rxjs-core/index.d.ts:515

toLocaleString

toLocaleString(): string
Returns a date converted to a string using the current locale.

Returns string
Inherited from DirectiveSuperclass.toLocaleString
- Defined in node_modules/typescript/lib/lib.es5.d.ts:131

toString

toString(): string
Returns a string representation of an object.

Returns string
Inherited from DirectiveSuperclass.toString
- Defined in node_modules/typescript/lib/lib.es5.d.ts:128

unsubscribe

unsubscribe(): void
Returns void
Inherited from DirectiveSuperclass.unsubscribe
- Defined in dist/rxjs-core/index.d.ts:517

valueOf

valueOf(): Object
Returns the primitive value of the specified object.

Returns Object
Inherited from DirectiveSuperclass.valueOf
- Defined in node_modules/typescript/lib/lib.es5.d.ts:134

writeValue

writeValue(value: T): void
Called as Angular propagates value changes to this ControlValueAccessor. You normally do not need to use it.
Parameters
- value: T
Returns void
Implementation of ControlValueAccessor.writeValue
- Defined in projects/ng-core/src/lib/forms/form-component-superclass.ts:48

`Static`assign

assign<T extends {}, U>(target: T, source: U): T & U
Copy the values of all of the enumerable own properties from one or more source objects to a target object. Returns the target object.
Type Parameters
- T extends {}
- U
Parameters
- target: T
  The target object to copy to.
- source: U
  The source object from which to copy properties.
Returns T & U
Inherited from DirectiveSuperclass.assign
- Defined in node_modules/typescript/lib/lib.es2015.core.d.ts:286
assign<T extends {}, U, V>(target: T, source1: U, source2: V): T & U & V
Copy the values of all of the enumerable own properties from one or more source objects to a target object. Returns the target object.
Type Parameters
- T extends {}
- U
- V
Parameters
- target: T
  The target object to copy to.
- source1: U
  The first source object from which to copy properties.
- source2: V
  The second source object from which to copy properties.
Returns T & U & V
Inherited from DirectiveSuperclass.assign
- Defined in node_modules/typescript/lib/lib.es2015.core.d.ts:295
assign<T extends {}, U, V, W>(
    target: T,
    source1: U,
    source2: V,
    source3: W,
): T & U & V & W
Copy the values of all of the enumerable own properties from one or more source objects to a target object. Returns the target object.
Type Parameters
- T extends {}
- U
- V
- W
Parameters
- target: T
  The target object to copy to.
- source1: U
  The first source object from which to copy properties.
- source2: V
  The second source object from which to copy properties.
- source3: W
  The third source object from which to copy properties.
Returns T & U & V & W
Inherited from DirectiveSuperclass.assign
- Defined in node_modules/typescript/lib/lib.es2015.core.d.ts:305
assign(target: object, ...sources: any[]): any
Copy the values of all of the enumerable own properties from one or more source objects to a target object. Returns the target object.
Parameters
- target: object
  The target object to copy to.
- ...sources: any[]
  One or more source objects from which to copy properties
Returns any
Inherited from DirectiveSuperclass.assign
- Defined in node_modules/typescript/lib/lib.es2015.core.d.ts:313

`Static`create

create(o: null | object): any
Creates an object that has the specified prototype or that has null prototype.
Parameters
- o: null | object
  Object to use as a prototype. May be null.
Returns any
Inherited from DirectiveSuperclass.create
- Defined in node_modules/typescript/lib/lib.es5.d.ts:188
create(o: null | object, properties: PropertyDescriptorMap & ThisType<any>): any
Creates an object that has the specified prototype, and that optionally contains specified properties.
Parameters
- o: null | object
  Object to use as a prototype. May be null
- properties: PropertyDescriptorMap & ThisType<any>
  JavaScript object that contains one or more property descriptors.
Returns any
Inherited from DirectiveSuperclass.create
- Defined in node_modules/typescript/lib/lib.es5.d.ts:195

`Static`defineProperties

defineProperties<T>(o: T, properties: PropertyDescriptorMap & ThisType<any>): T
Adds one or more properties to an object, and/or modifies attributes of existing properties.
Type Parameters
- T
Parameters
- o: T
  Object on which to add or modify the properties. This can be a native JavaScript object or a DOM object.
- properties: PropertyDescriptorMap & ThisType<any>
  JavaScript object that contains one or more descriptor objects. Each descriptor object describes a data property or an accessor property.
Returns T
Inherited from DirectiveSuperclass.defineProperties
- Defined in node_modules/typescript/lib/lib.es5.d.ts:210

`Static`defineProperty

defineProperty<T>(
    o: T,
    p: PropertyKey,
    attributes: PropertyDescriptor & ThisType<any>,
): T
Adds a property to an object, or modifies attributes of an existing property.
Type Parameters
- T
Parameters
- o: T
  Object on which to add or modify the property. This can be a native JavaScript object (that is, a user-defined object or a built in object) or a DOM object.
- p: PropertyKey
  The property name.
- attributes: PropertyDescriptor & ThisType<any>
  Descriptor for the property. It can be for a data property or an accessor property.
Returns T
Inherited from DirectiveSuperclass.defineProperty
- Defined in node_modules/typescript/lib/lib.es5.d.ts:203

`Static`entries

entries<T>(o: { [s: string]: T } | ArrayLike<T>): [string, T][]
Returns an array of key/values of the enumerable own properties of an object
Type Parameters
- T
Parameters
- o: { [s: string]: T } | ArrayLike<T>
  Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object.
Returns [string, T][]
Inherited from DirectiveSuperclass.entries
- Defined in node_modules/typescript/lib/lib.es2017.object.d.ts:36
entries(o: {}): [string, any][]
Returns an array of key/values of the enumerable own properties of an object
Parameters
- o: {}
  Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object.
Returns [string, any][]
Inherited from DirectiveSuperclass.entries
- Defined in node_modules/typescript/lib/lib.es2017.object.d.ts:42

`Static`freeze

freeze<T extends Function>(f: T): T
Prevents the modification of existing property attributes and values, and prevents the addition of new properties.
Type Parameters
- T extends Function
Parameters
- f: T
  Object on which to lock the attributes.
Returns T
Inherited from DirectiveSuperclass.freeze
- Defined in node_modules/typescript/lib/lib.es5.d.ts:222
freeze<
    T extends { [idx: string]: undefined
    | null
    | object
    | U },
    U extends string | number | bigint | boolean | symbol,
>(
    o: T,
): Readonly<T>
Prevents the modification of existing property attributes and values, and prevents the addition of new properties.
Type Parameters
- T extends { [idx: string]: undefined | null | object | U }
- U extends string | number | bigint | boolean | symbol
Parameters
- o: T
  Object on which to lock the attributes.
Returns Readonly<T>
Inherited from DirectiveSuperclass.freeze
- Defined in node_modules/typescript/lib/lib.es5.d.ts:228
freeze<T>(o: T): Readonly<T>
Prevents the modification of existing property attributes and values, and prevents the addition of new properties.
Type Parameters
- T
Parameters
- o: T
  Object on which to lock the attributes.
Returns Readonly<T>
Inherited from DirectiveSuperclass.freeze
- Defined in node_modules/typescript/lib/lib.es5.d.ts:234

`Static`fromEntries

fromEntries<T = any>(
entries: Iterable<readonly [PropertyKey, T]>,
): { [k: string]: T }
Returns an object created by key-value entries for properties and methods
Type Parameters
- T = any
Parameters
- entries: Iterable<readonly [PropertyKey, T]>
  An iterable object that contains key-value entries for properties and methods.
Returns { [k: string]: T }
Inherited from DirectiveSuperclass.fromEntries
- Defined in node_modules/typescript/lib/lib.es2019.object.d.ts:26
fromEntries(entries: Iterable<readonly any[]>): any
Returns an object created by key-value entries for properties and methods
Parameters
- entries: Iterable<readonly any[]>
  An iterable object that contains key-value entries for properties and methods.
Returns any
Inherited from DirectiveSuperclass.fromEntries
- Defined in node_modules/typescript/lib/lib.es2019.object.d.ts:32

`Static`getOwnPropertyDescriptor

getOwnPropertyDescriptor(o: any, p: PropertyKey): undefined | PropertyDescriptor
Gets the own property descriptor of the specified object. An own property descriptor is one that is defined directly on the object and is not inherited from the object's prototype.
Parameters
- o: any
  Object that contains the property.
- p: PropertyKey
  Name of the property.
Returns undefined | PropertyDescriptor
Inherited from DirectiveSuperclass.getOwnPropertyDescriptor
- Defined in node_modules/typescript/lib/lib.es5.d.ts:175

`Static`getOwnPropertyDescriptors

getOwnPropertyDescriptors<T>(
o: T,
): { [P in string | number | symbol]: TypedPropertyDescriptor<T[P]> } & {
[x: string]: PropertyDescriptor;
}
Returns an object containing all own property descriptors of an object
Type Parameters
- T
Parameters
- o: T
  Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object.
Returns { [P in string | number | symbol]: TypedPropertyDescriptor<T[P]> } & {
[x: string]: PropertyDescriptor;
}
Inherited from DirectiveSuperclass.getOwnPropertyDescriptors
- Defined in node_modules/typescript/lib/lib.es2017.object.d.ts:48

`Static`getOwnPropertyNames

getOwnPropertyNames(o: any): string[]
Returns the names of the own properties of an object. The own properties of an object are those that are defined directly on that object, and are not inherited from the object's prototype. The properties of an object include both fields (objects) and functions.
Parameters
- o: any
  Object that contains the own properties.
Returns string[]
Inherited from DirectiveSuperclass.getOwnPropertyNames
- Defined in node_modules/typescript/lib/lib.es5.d.ts:182

`Static`getOwnPropertySymbols

getOwnPropertySymbols(o: any): symbol[]
Returns an array of all symbol properties found directly on object o.
Parameters
- o: any
  Object to retrieve the symbols from.
Returns symbol[]
Inherited from DirectiveSuperclass.getOwnPropertySymbols
- Defined in node_modules/typescript/lib/lib.es2015.core.d.ts:319

`Static`getPrototypeOf

getPrototypeOf(o: any): any
Returns the prototype of an object.
Parameters
- o: any
  The object that references the prototype.
Returns any
Inherited from DirectiveSuperclass.getPrototypeOf
- Defined in node_modules/typescript/lib/lib.es5.d.ts:167

`Static`hasOwn

hasOwn(o: object, v: PropertyKey): boolean
Determines whether an object has a property with the specified name.
Parameters
- o: object
  An object.
- v: PropertyKey
  A property name.
Returns boolean
Inherited from DirectiveSuperclass.hasOwn
- Defined in node_modules/typescript/lib/lib.es2022.object.d.ts:25

`Static`is

is(value1: any, value2: any): boolean
Returns true if the values are the same value, false otherwise.
Parameters
- value1: any
  The first value.
- value2: any
  The second value.
Returns boolean
Inherited from DirectiveSuperclass.is
- Defined in node_modules/typescript/lib/lib.es2015.core.d.ts:332

`Static`isExtensible

isExtensible(o: any): boolean
Returns a value that indicates whether new properties can be added to an object.
Parameters
- o: any
  Object to test.
Returns boolean
Inherited from DirectiveSuperclass.isExtensible
- Defined in node_modules/typescript/lib/lib.es5.d.ts:258

`Static`isFrozen

isFrozen(o: any): boolean
Returns true if existing property attributes and values cannot be modified in an object, and new properties cannot be added to the object.
Parameters
- o: any
  Object to test.
Returns boolean
Inherited from DirectiveSuperclass.isFrozen
- Defined in node_modules/typescript/lib/lib.es5.d.ts:252

`Static`isSealed

isSealed(o: any): boolean
Returns true if existing property attributes cannot be modified in an object and new properties cannot be added to the object.
Parameters
- o: any
  Object to test.
Returns boolean
Inherited from DirectiveSuperclass.isSealed
- Defined in node_modules/typescript/lib/lib.es5.d.ts:246

`Static`keys

keys(o: object): string[]
Returns the names of the enumerable string properties and methods of an object.
Parameters
- o: object
  Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object.
Returns string[]
Inherited from DirectiveSuperclass.keys
- Defined in node_modules/typescript/lib/lib.es5.d.ts:264
keys(o: {}): string[]
Returns the names of the enumerable string properties and methods of an object.
Parameters
- o: {}
  Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object.
Returns string[]
Inherited from DirectiveSuperclass.keys
- Defined in node_modules/typescript/lib/lib.es2015.core.d.ts:325

`Static`preventExtensions

preventExtensions<T>(o: T): T
Prevents the addition of new properties to an object.
Type Parameters
- T
Parameters
- o: T
  Object to make non-extensible.
Returns T
Inherited from DirectiveSuperclass.preventExtensions
- Defined in node_modules/typescript/lib/lib.es5.d.ts:240

`Static`seal

seal<T>(o: T): T
Prevents the modification of attributes of existing properties, and prevents the addition of new properties.
Type Parameters
- T
Parameters
- o: T
  Object on which to lock the attributes.
Returns T
Inherited from DirectiveSuperclass.seal
- Defined in node_modules/typescript/lib/lib.es5.d.ts:216

`Static`setPrototypeOf

setPrototypeOf(o: any, proto: null | object): any
Sets the prototype of a specified object o to object proto or null. Returns the object o.
Parameters
- o: any
  The object to change its prototype.
- proto: null | object
  The value of the new prototype or null.
Returns any
Inherited from DirectiveSuperclass.setPrototypeOf
- Defined in node_modules/typescript/lib/lib.es2015.core.d.ts:339

`Static`values

values<T>(o: { [s: string]: T } | ArrayLike<T>): T[]
Returns an array of values of the enumerable own properties of an object
Type Parameters
- T
Parameters
- o: { [s: string]: T } | ArrayLike<T>
  Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object.
Returns T[]
Inherited from DirectiveSuperclass.values
- Defined in node_modules/typescript/lib/lib.es2017.object.d.ts:24
values(o: {}): any[]
Returns an array of values of the enumerable own properties of an object
Parameters
- o: {}
  Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object.
Returns any[]
Inherited from DirectiveSuperclass.values
- Defined in node_modules/typescript/lib/lib.es2017.object.d.ts:30

Class FormComponentSuperclass<T>Abstract

Type Parameters

Hierarchy (View Summary)

Implements

Index

Constructors

Properties

Methods

Constructors

constructor

Type Parameters

Parameters

Returns FormComponentSuperclass

Properties

__#7@#subscriptions

constructor

destruction$

emitOutgoingValue

inputChanges$

isDisabled

onTouched

Type declaration

Returns void

Methods

bindToInstance

Type Parameters

Parameters

Returns void

getInput$

Type Parameters

Parameters

Returns Observable<FormComponentSuperclass<T>[K]>

AbstracthandleIncomingValue

Parameters

Returns void

hasOwnProperty

Parameters

Returns boolean

isPrototypeOf

Parameters

Returns boolean

manage

Parameters

Returns void

ngOnChanges

Parameters

Returns void

propertyIsEnumerable

Parameters

Returns boolean

registerOnChange

Parameters

Returns void

registerOnTouched

Parameters

Returns void

setDisabledState

Parameters

Returns void

subscribeTo

Type Parameters

Parameters

Returns void

toLocaleString

Returns string

toString

Returns string

unsubscribe

Returns void

valueOf

Returns Object

writeValue

Parameters

Returns void

Staticassign

Type Parameters

Parameters

Returns T & U

Type Parameters

Parameters

Class FormComponentSuperclass<T>`Abstract`

`Abstract`handleIncomingValue

`Static`assign

`Static`create

`Static`defineProperties

`Static`defineProperty

`Static`entries

`Static`freeze

`Static`fromEntries

`Static`getOwnPropertyDescriptor

`Static`getOwnPropertyDescriptors

Returns { [P in string | number | symbol]: TypedPropertyDescriptor<T[P]> } & {
[x: string]: PropertyDescriptor;
}

`Static`getOwnPropertyNames

`Static`getOwnPropertySymbols

`Static`getPrototypeOf

`Static`hasOwn

`Static`is

`Static`isExtensible

`Static`isFrozen

`Static`isSealed