Angular 2 - formControlName inside component

Question

I want to create a custom input component that I can use with the FormBuilder API. How do I add formControlName inside a component?

Template:

Answer 1

Hopefully this simple use case can help someone.

This is an example of a phone number masking component that allows you to pass in the form group and reference the form control inside the component.

Child Component - phone-input.component.html

Add a reference to the FormGroup in the containing div and pass in the formControlName like you normally would on the input.

Parent Component - form.component.html

Reference the component and pass in pFormGroup and pControlName as atttributes.

     Home