The DOM

 

The ngModel, ngControlName, and other form directives bind the form model to UI elements, which are often native to the platform (for example, <input>), but they do not have to be. For instance, NgModel can be applied to an Angular component.

<md-input[(ngModel)]="speaker" name="speaker" placeholder="Speaker">

A ControlValueAccessor is a directive that acts like a adapter connecting a UI element to NgModel. It knows how to read and write to the native UI-element.

The @angular/forms package comes with value accessors for all built-in UI elements (input, textarea, so on). But if we want to apply an NgModel to a custom element or an Angular component, we will have to provide a value accessor for it ourselves.

@Component({
  selector: 'custom-input',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputCmp),
      multi: true
    }
  ]
})
class CustomInputCmp implements ControlValueAccessor {
  //...
}