Template

Reactive Form

Custom form components

Some usages

• Groups multiple inputs into a single component.
• The error messages are controlled by the component (not in the parent form)
• Specify validators to inputs inside the component.

Steps

• Allow ngModel for get value and set value:
  • Implement ControlValueAccessor interface
  • Inject NG_VALUE_ACCESSOR
• Allow validation on the control:
  • Implement Validator interface
  • Inject NG_VALIDATORS

Reference

https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html http://blog.rangle.io/angular-2-ngmodel-and-custom-form-components/