Class WrappedControlSuperclass<OuterType, InnerType>Abstract

Extend this when creating a form component that simply wraps existing ones, to reduce a lot of boilerplate.

The most common case is to use a simple FormControl:

@Component({
standalone: true,
imports: [ReactiveFormsModule],
template: `<input [formControl]="control" />`,
providers: [provideValueAccessor(StringComponent)],
})
class StringComponent extends WrappedControlSuperclass<string | null> {
protected control = new FormControl('');
}

Example when you need to modify the wrapped control's value:

@Component({
selector: 'sl-date',
standalone: true,
imports: [ReactiveFormsModule],
template: `<input type="datetime-local" [formControl]="control" />`,
providers: [provideValueAccessor(DateComponent)],
})
class DateComponent extends WrappedControlSuperclass<
Date | null,
string | null
> {
protected control = new FormControl<string | null>(null);

protected override innerToOuterValue(
inner: string | null,
): Date | null {
return inner ? new Date(`${inner}Z`) : null;
}

protected override outerToInnerValue(
outer: Date | null,
): string | null {
return outer ? outer.toISOString().substring(0, 16) : null;
}
}

Example of wrapping multiple inner components:

class FullName {
firstName = '';
lastName = '';
}

@Component({
selector: 'sl-full-name',
standalone: true,
imports: [ReactiveFormsModule],
template: `
<div [formGroup]="control">
<input id="first" formControlName="firstName" />
<input id="last" formControlName="lastName" />
</div>
`,
providers: [provideValueAccessor(FullNameComponent)],
})
class FullNameComponent extends WrappedControlSuperclass<
FullName | null,
Partial<FullName>
> {
protected control = new FormGroup({
firstName: new FormControl('', { nonNullable: true }),
lastName: new FormControl('', { nonNullable: true }),
});

protected override outerToInnerValue(outer: FullName | null): FullName {
// `formControlName` binding can't handle a null value
return outer ?? new FullName();
}

protected override innerToOuterValue(
inner: Partial<FullName>,
): FullName {
// the values in a `FormGroup` can be `undefined` when their corresponding controls are disabled
return {
firstName: inner.firstName ?? '',
lastName: inner.lastName ?? '',
};
}
}

If you bind to your component using an NgControl (e.g. when using ngModel), validation errors will be synchronized between it and the control inside your component. You can override various methods below to control or disable that process. Note that validation, statuschanges, and valuechanges may all happen more often as a result of this synchronization.

Type Parameters

  • OuterType

  • InnerType = OuterType

Hierarchy

Implements

  • OnInit

Constructors

Properties

__#4@#subscriptions: Subscription
constructor: Function

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

control: AbstractControl<InnerType, InnerType>

Bind this to your inner form control to make all the magic happen.

destruction$: Observable<void> = ...

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

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

Type declaration

    • (value): void
    • Call this to emit a new value when it changes.

      Parameters

      • value: OuterType

      Returns void

inputChanges$: Subject<Set<keyof WrappedControlSuperclass<OuterType, InnerType>>> = ...

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

isDisabled: boolean = false

You can bind to this in your template as needed.

onTouched: (() => void) = noop

Type declaration

    • (): void
    • Call this to "commit" a change, traditionally done e.g. on blur.

      Returns void

Methods

  • Determines whether an object has a property with the specified name.

    Parameters

    • v: PropertyKey

      A property name.

    Returns boolean

  • Override this to modify validation errors that synchronize out from this component.

    For more complex needs, see #setUpInnerToOuterErrors$ instead.

    Parameters

    • errors: ValidationErrors

    Returns ValidationErrors

  • Override this to modify a value coming from within this component to the format expected on the outside.

    For more complex needs, see #setUpInnerToOuterValue$ instead.

    Parameters

    • inner: InnerType

    Returns OuterType

  • 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

  • Parameters

    • subscription: Subscription

    Returns void

  • Override this to modify validation errors that synchronize in to this component.

    In this example we assume the required validation is handled by the user and should not affect internal validation

    protected override outerToInnerErrors(
    errors: ValidationErrors,
    ): ValidationErrors {
    return omit(errors, 'required');
    }

    For more complex needs, see #setUpOuterToInnerErrors$ instead.

    Parameters

    • errors: ValidationErrors

    Returns ValidationErrors

  • Determines whether a specified property is enumerable.

    Parameters

    • v: PropertyKey

      A property name.

    Returns boolean

  • Override this to for full control over the stream of validation errors synchronized out from your subclass.

    In this example, synchronization is turned off:

    protected override setUpInnerToOuterErrors$(): Observable<ValidationErrors> {
    return EMPTY;
    }

    For a simple transformation, see #innerToOuterErrors instead.

    Parameters

    • inner$: Observable<ValidationErrors>

    Returns Observable<ValidationErrors>

  • Override this to for full control over the stream of values emitted from your subclass.

    In this example, illegal values are not emitted

    setUpInnerToOuterValue$(inner$: Observable<InnerType>): Observable<OuterType> {
    return inner$.pipe(
    filter((inner) => isLegalValue(outer)),
    );
    }

    For a simple transformation, see #innerToOuterValue instead.

    Parameters

    • inner$: Observable<InnerType>

    Returns Observable<OuterType>

  • Override this to for full control over the stream of validation errors synchronized in to your subclass.

    For a simple transformation, see #outerToInnerErrors instead.

    Parameters

    • outer$: Observable<ValidationErrors>

    Returns Observable<ValidationErrors>

  • Override this to for full control over the stream of values passed in to your subclass.

    In this example, incoming values are debounced before being passed through to the inner form control

    setUpOuterToInnerValue$(outer$: Observable<OuterType>): Observable<InnerType> {
    return outer$.pipe(
    debounce(300),
    map((outer) => doExpensiveTransformToInnerValue(outer)),
    );
    }

    For a simple transformation, see #outerToInnerValue instead.

    Parameters

    • outer$: Observable<OuterType>

    Returns Observable<InnerType>

  • Type Parameters

    • T

    Parameters

    • observable: Observable<T>
    • Optional next: ((value) => void)
        • (value): void
        • Parameters

          • value: T

          Returns void

    • Optional error: ((error) => void)
        • (error): void
        • Parameters

          • error: any

          Returns void

    • Optional complete: (() => void)
        • (): void
        • Returns void

    Returns void

  • Returns a date converted to a string using the current locale.

    Returns string

  • Returns a string representation of an object.

    Returns string

  • Returns the primitive value of the specified object.

    Returns Object

  • 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

  • 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

  • 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

  • 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.

    • Rest ...sources: any[]

      One or more source objects from which to copy properties

    Returns 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

  • 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

  • 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

  • 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

  • Returns an array of key/values of the enumerable 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][]

  • Returns an array of key/values of the enumerable 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][]

    • 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

    • Prevents the modification of existing property attributes and values, and prevents the addition of new properties.

      Type Parameters

      • T extends {
            [idx: string]: U | null | undefined | object;
        }

      • U extends string | number | bigint | boolean | symbol

      Parameters

      • o: T

        Object on which to lock the attributes.

      Returns 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>

    • 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;
      }

      • [k: string]: T
    • 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

    • 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

    • 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;
      }

    • 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[]

    • Returns an array of all symbol properties found directly on object o.

      Parameters

      • o: any

        Object to retrieve the symbols from.

      Returns symbol[]

    • Returns the prototype of an object.

      Parameters

      • o: any

        The object that references the prototype.

      Returns any

    • Determines whether an object has a property with the specified name.

      Parameters

      • o: object

        An object.

      • v: PropertyKey

        A property name.

      Returns 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

    • Returns a value that indicates whether new properties can be added to an object.

      Parameters

      • o: any

        Object to test.

      Returns 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

    • 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

    • 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[]

    • 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[]

      • Prevents the addition of new properties to an object.

        Type Parameters

        • T

        Parameters

        • o: T

          Object to make non-extensible.

        Returns 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

      • 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

      • Returns an array of values of the enumerable 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[]

      • Returns an array of values of the enumerable 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[]

        Generated using TypeDoc