@s-libs/ng-core
    Preparing search index...

    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({
    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',
    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',
    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

    Hierarchy (View Summary)

    Implements

    • OnInit
    Index

    Constructors

    Properties

    "__#7@#subscriptions": Subscription
    constructor: Function

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

    control: AbstractControl<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: OuterType) => void = noop

    Call this to emit a new value when it changes.

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

    @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: boolean = false

    You can bind to this in your template as needed.

    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

    • 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

    • 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

    • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

      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

      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

      Returns Observable<InnerType>

    • Type Parameters

      • T

      Parameters

      • observable: Observable<T>
      • Optionalnext: (value: T) => void
      • Optionalerror: (error: any) => void
      • Optionalcomplete: () => 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.

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

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

    • 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]: undefined | null | object | U }
      • 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 }

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

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