Extend this when creating a form control that simply wraps an existing form control, to reduce a lot of boilerplate. Warning: You must include a constructor in your subclass.

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

@Component({
  template: `<input [formControl]="formControl">`,
  providers: [provideValueAccessor(StringComponent)],
})
class StringComponent extends WrappedFormControlSuperclass<string> {
  // This looks unnecessary, but is required for Angular to provide `Injector`
  constructor(injector: Injector) {
    super(injector);
  }
}

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

@Component({
  template: `<input type="datetime-local" [formControl]="formControl">`,
  providers: [provideValueAccessor(DateComponent)],
})
class DateComponent extends WrappedFormControlSuperclass<Date, string> {
  // This looks unnecessary, but is required for Angular to provide `Injector`
  constructor(injector: Injector) {
    super(injector);
  }

  protected innerToOuter(value: string): Date {
    return new Date(value + "Z");
  }

  protected outerToInner(value: Date): string {
    if (value === null) {
      return ""; // happens during initialization
    }
    return value.toISOString().substr(0, 16);
  }
}

Type parameters

  • OuterType

  • InnerType

Hierarchy

Implements

  • Unsubscribable
  • OnDestroy
  • OnChanges
  • ControlValueAccessor

Index

Constructors

constructor

Properties

Protected changeDetectorRef

changeDetectorRef: ChangeDetectorRef

destruction$

destruction$: Observable<undefined>

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

emitOutgoingValue

emitOutgoingValue: function = noop

Call this to emit a new value when it changes.

formControl

formControl: FormControl = new FormControl()

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

inputChanges$

inputChanges$: Subject<Set<keyof this>> = new Subject<Set<keyof this>>()

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: noop = noop

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

Methods

bindToInstance

  • bindToInstance<K>(key: K, value$: Observable<this[K]>): void

getInput$

  • getInput$<K>(key: K): Observable<this[K]>

handleIncomingValue

  • handleIncomingValue(value: OuterType): void

Protected innerToOuter

  • innerToOuter(value: InnerType): OuterType

ngOnChanges

  • ngOnChanges(changes: SimpleChanges): void

ngOnDestroy

  • ngOnDestroy(): void

Protected outerToInner

  • outerToInner(value: OuterType): InnerType

registerOnChange

  • registerOnChange(fn: function): void

registerOnTouched

  • registerOnTouched(fn: VoidFunction): void

setDisabledState

  • setDisabledState(isDisabled: boolean): void

subscribeTo

  • subscribeTo<T>(observable: Observable<T>, next?: undefined | function, error?: undefined | function, complete?: undefined | function): void

unsubscribe

  • unsubscribe(): void

writeValue

  • writeValue(value: OuterType): void

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method

Generated using TypeDoc