title: How to wrap a primeng component like autocomplete using reactive forms?
body: <p>I want to wrap a primeng autocomplete component in my own component but can't figure out haw to provide a formControlName:</p>
  
  <p><strong>Error: Uncaught (in promise): Error: formControlName must be used with a parent formGroup directive.</strong></p>
  
  <p>Wrapper component html:</p>
  
  <pre><code>&lt;p-autoComplete
    [formControlName]="formControlName"
    [suggestions]="suggestions"
    [multiple]="multiple"
    [dropdown]="dropdown"
    (completeMethod)="search($event)"&gt;
  &lt;/p-autoComplete&gt;
  </code></pre>
  
  <p>Wrapper component ts:</p>
  
  <pre><code>@Component({
    selector: 'logi-autocomplete',
    templateUrl: 'autocomplete.component.html',
    providers: [AUTOCOMPLETE_VALUE_ACCESSOR]
  })
  export class AutocompleteComponent implements OnInit, ControlValueAccessor {
  
    @Input() formControlName: string;
  
    @Input() multiple = true;
    @Input() dropdown = true;
  
    // Skipped non related code
  
    _value: any = '';
    get value(): any { return this._value; };
    set value(v: any) {
      if (v !== this._value) {
        this._value = v;
        this.onChange(v);
      }
    }
  
    writeValue(value: any) {
      this._value = value;
      this.onChange(value);
    }
  
    onChange = (_) =&gt; {};
    onTouched = () =&gt; {};
    registerOnChange(fn: (_: any) =&gt; void): void { this.onChange = fn; }
    registerOnTouched(fn: () =&gt; void): void { this.onTouched = fn; }
  }
  </code></pre>
  
  <p>Use of the component in a custom for component:</p>
  
  <pre><code>&lt;form [formGroup]="form"&gt;
      &lt;logi-autocomplete
        [formControlName]="'groups'"
      &gt;&lt;/logi-autocomplete&gt;
  &lt;/form&gt;
  </code></pre>