Cannot find control with unspecified name attribute Angular

Question

I’m trying to make a simple component using Reactive Forms in the input, but this giving error that until now had not seen

Input.components.ts

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormBuilder,Validators, AbstractControl } from 
       "@angular/forms"
@Component({
  selector: 'nube-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css']
})

export class InputComponent implements OnInit {
 @Input() itens?:string

 @Input() inputFormsGroup?:FormGroup


 constructor(private formBuilder:FormBuilder) { }

 ngOnInit() {
   this.inputFormsGroup = this.inputFormsGroup ||
   this.formBuilder.group({})
   for(const inputItens of this.itens){
    const control = this.formBuilder.control({
    name:['',Validators.required]
  })
  this.inputFormsGroup.addControl(inputItens, control)
  }
 }

}

Input.component.html

<form [formGroup]="inputFormsGroup">
 <input type="text" [formControlName]="item">
</form>

app.componentts.

import { Component } from '@angular/core';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
@Component({
  selector: 'nube-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'] 
 })
export class AppComponent {
title = 'Nube';
formGroup? : FormGroup
checkInput:string
constructor(private formBuilder: FormBuilder) {
}
ngOnInit() {

this.formGroup = this.formBuilder.group({});
this.checkInput = 'Teste'
}

}

App.component.html

<nube-input [inputFormsGroup] [itens]="checkInput"></nube-input>

App.modulets.

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';

 import { AppRoutingModule } from './app-routing.module'; 
 import { AppComponent } from './app.component'; 
 import { InputComponent } from './input/input.component'; 
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';

 @NgModule({
   declarations: [
   AppComponent,
   InputComponent
 ],
 imports: [
   BrowserModule,
   AppRoutingModule,FormsModule,ReactiveFormsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

Error

ERROR Error: Cannot find control with unspecified name attribute
at _throwError (forms.js:2144)
at setUpControl (forms.js:2052)

atFormGroupDirective.push../node_modules/@angular
    /forms/fesm5/forms.
    js.FormGroupDirective.addControl (forms.js:5281)
at FormControlName.push../node_modules/@angular/forms/fesm5
/forms.js.FormControlName._setUpControl (forms.js:5882)

at FormControlName.push../node_modules/@angular/forms/fesm5
/forms.js.FormControlName.ngOnChanges (forms.js:5803)


at checkAndUpdateDirectiveInline (core.js:21996)
at checkAndUpdateNodeInline (core.js:23264)
at checkAndUpdateNode (core.js:23226)
at debugCheckAndUpdateNode (core.js:23860)
at debugCheckDirectivesFn (core.js:23820)

Where can I be missing?

Answer 1

The error reported is that on the initialization of your component you reported that there should be a control called 'name' in the form, however there is no control with this name in the HTML of your component.

<form [formGroup]="inputFormsGroup">
 <input type="text" [formControlName]="item">
</form>

For:

<form [formGroup]="inputFormsGroup">
 <input type="text" formControlName="name">
</form>

Of course I realized that your intention is to generate something like dynamic input, but I believe that understanding better why it was wrong, you will already be able to follow.