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.

isDisabled

isDisabled: boolean = false

You can bind to this in your template as needed.

lastChangedKeys$

lastChangedKeys$: BehaviorSubject<Set<keyof this>> = new BehaviorSubject<Set<keyof this>>(new Set())

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

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
  • 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 an an alternative to repeating | async multiple times in your template.

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