我想使用自定义输入组件创建一个表单,并遇到以下问题 .

错误:没有名称形式控件的值访问器:'nome'堆栈跟踪:_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

这是我的输入组件:

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() {
  }
  }

}

HTML:

<div class="input-group">
  <input 
      type="text" class="form-control">
</div>

我试图使用它如下:

<form [formGroup]="empresaForm">
  <div class="form-row">

    <app-pf-input-text formControlName="nome"></app-pf-input-text>

  </div>
</form>

这是我的表格:

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();
  }

}

我不知道如何通过我的自定义输入将formControlName指令传递给输入 .