Extend this when creating a form control to reduce some boilerplate. Warning: You must include a constructor in your subclass.

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 FormControlSuperclass<number> {
  counter = 0;

  // This looks unnecessary, but is required for Angular to provide `Injector`
  constructor(injector: Injector) {
    super(injector);
  }

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

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

Type parameters

  • T

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.

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

Abstract handleIncomingValue

  • handleIncomingValue(value: T): void

ngOnChanges

  • ngOnChanges(changes: SimpleChanges): void

ngOnDestroy

  • ngOnDestroy(): void

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: T): 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