4

Estou tentando fazer um componente simples utilizando Reactive Forms no input, porem esta dando erro que até o momento não tinha visto

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.component.ts

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.module.ts

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

Erro

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)

Onde eu posso estar errando?

3 Respostas 3

4

O erro informado é que na inicialização do seu componente você informou que deveria existir um controle chamado 'name' no formulario, porem não existe nenhum controle com esse nome no HTML do seu componente.

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

Por:

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

Claro que percebi que sua intenção é gerar algo como input dinâmicos, mas acredito que compreendendo melhor o porque deu erro, você já vai conseguir seguir.

1

O que está acontecendo é:

Você chama o [formControlName]="item" no html mas o item não está declarado no ts.

Declare o formControl corretamente e chame no html corretamente.

1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    6/07/2022 às 17:23
-1

Complementando a resposta dos colegas, esse erro também acontece se tu esquece de colocar o nome na tag. Ex:

<input type="text" name="prazo" formControlName="" class="input">

Ou seja, se ele não acha o nome do campo que está no arquivo TS ou tem um nome no HTML diferente do arquivo TS, esse erro aparece.

Você deve fazer log-in para responder a esta pergunta.