title: Form Reactive with custom input
body: <p>I want to create a form using a custom input component, and am having the following problem.</p>
  
  <blockquote>
    <p>Error: No value accessor for form control with name: 'nome' Stack
    trace:
    _throwError@webpack-internal:///./node_modules/@angular/forms/esm5/forms.js:2510:11
    setUpControl@webpack-internal:///./node_modules/@angular/forms/esm5/forms.js:2380:9
    FormGroupDirective.prototype.addControl@webpack-internal:///./node_modules/@angular/forms/esm5/forms.js:6736:9
    FormControlName.prototype._setUpControl@webpack-internal:///./node_modules/@angular/forms/esm5/forms.js:7386:45
    FormControlName.prototype.ngOnChanges@webpack-internal:///./node_modules/@angular/forms/esm5/forms.js:7299:13</p>
  </blockquote>
  
  <p>This is my input component:</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  
  @Component({
    selector: 'app-pf-input-text',
    templateUrl: './pf-input-text.component.html',
    styleUrls: ['./pf-input-text.component.scss']
  })
  export class PfInputTextComponent implements OnInit {
  
    @Input() id: string;
    @Input() name: string;
    @Input() value: string;
    @Input() placeholder: string;
    @Input() formControlName: any;
  
    //falta trim
  
    @Input() maxlength: string;
    @Input() minlength: string;
  
    @Input() disabled: boolean;
    @Input() required: boolean;
  
    constructor() { }
  
    ngOnInit() {
    }
    }
  
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="input-group"&gt;
    &lt;input 
        type="text" class="form-control"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am trying to use it as follows:</p>
  
  <pre><code>&lt;form [formGroup]="empresaForm"&gt;
    &lt;div class="form-row"&gt;
  
      &lt;app-pf-input-text formControlName="nome"&gt;&lt;/app-pf-input-text&gt;
  
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This is my form:</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  
  import { FormArray, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
  
  import { Empresa } from '../empresa.model';
  
  @Component({
    selector: 'app-empresa-cadastro',
    templateUrl: './empresa-cadastro.component.html',
    styleUrls: ['./empresa-cadastro.component.css']
  })
  export class EmpresaCadastroComponent implements OnInit {
  
    empresaForm: FormGroup;
  
    nomeControl: FormControl;
  
    constructor(private fb: FormBuilder) {}
  
    createForm() {
      this.nomeControl = new FormControl('', [
        Validators.required,
        Validators.minLength(3),
        Validators.maxLength(10)
      ]);
    }
  
    createFormControl() {
      console.log('Criando FormControl');
    }
  
    onSubmit() {
      const empresa = this.empresaForm.value as Empresa;
      console.log('Empresa: ', empresa);
    }
  
    limpar() {
      this.empresaForm.reset();
    }
  
    ngOnInit() {
      this.createForm();
    }
  
  }
  </code></pre>
  
  <p>I'm not sure how to pass the formControlName directive to the input, through my custom input.</p>