Reusable Form Components

Introduction

Reusable form components encapsulate common form patterns and can be used with template-driven and reactive forms via ControlValueAccessor.

Example

@Component({
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => StarRatingComponent),
    multi: true
  }]
})
export class StarRatingComponent implements ControlValueAccessor {
  writeValue(value: any) { /* ... */ }
  registerOnChange(fn: any) { /* ... */ }
  registerOnTouched(fn: any) { /* ... */ }
  setDisabledState(isDisabled: boolean) { /* ... */ }
}

Summary

ControlValueAccessor makes any component compatible with Angular forms.”