Cannot find control with name:

cannot find control with unspecified name attribute
cannot find control with name 'formarray'
cannot find control with name dynamic form
cannot find control with name child component
cannot find control with name ' object object ' angular
angular test cannot find control with name
no value accessor for form control with name
cannot find form control with name setvalue

I have a quite complicated form which I want to break down into individual components. Here is my base form (only taken example fields), I'm using FormBuilder:

ngOnInit() {
  this.predictorQuestion = this.fb.group({
  question: ['', Validators.required],
  options: this.fb.array([
    this.fb.control('', Validators.required),
  ]),
  meta_options: this.fb.group({
   test_type: ['', Validators.required],
  })
});

get meta_options() {
  return this.predictorQuestion.get('meta_options') as FormGroup;
}

get options() {
  return this.predictorQuestion.get('options') as FormArray;
}

If I try to connect this to my templates, it works perfectly:

<form [formGroup]="predictorQuestion" fxLayout="column">
  <mat-form-field fxFlex appearance="outline">
    <mat-label>Question</mat-label>
    <input matInput formControlName="question">
  </mat-form-field>

  <div fxLayoutAlign="space-between center">
    <h3>Options</h3>
    <button (click)="addOption()" matTooltip="Add option" matTooltipPosition="right" mat-mini-fab type="button">
      <mat-icon>add</mat-icon>
    </button>
  </div>
  <div formArrayName="options" fxLayout="column">
    <div *ngFor="let answer of options.controls; let i = index" fxLayout="row" fxLayoutAlign="space-between stretch">
      <mat-form-field appearance="outline" fxFlex>
        <mat-label>Option {{ i+1 }} </mat-label>
        <input fxFlex matInput [formControlName]="i">
      </mat-form-field>
      <button mat-icon-button matTooltip="Remove this option" matTooltipPosition="right" (click)="removeOption(i)">
        <mat-icon>close</mat-icon>
      </button>
    </div>
  </div>

  <div formGroupName="meta_options" fxLayoutAlign="space-between" fxLayoutGap="20px" fxLayout="column">
    <mat-form-field fxFlex="25">
      <mat-select formControlName="test_type">
        <mat-option *ngFor="let vtype of vtypes" value="{{ vtype.value }}">{{ vtype.name }}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</form>

This renders without any errors.

If I try to break down the meta_options.test_type in a component of its own in a way like:

component.ts

@Input() parent_form: FormGroup;
public vtypes: Array<Object>;


  constructor(private fb: FormBuilder) {
    this.vtypes = [
      {
        name: 'Timestamp',
        value: 'timestamp'
      },
      {
        name: 'Over',
        value: 'over'
      }
    ];
  }

component.html

<mat-form-field fxFlex="25" [formGroup]="parent_form">
  <mat-select formControlName="test_type">
    <mat-option *ngFor="let vtype of vtypes" value="{{ vtype.value }}">{{ vtype.name }}</mat-option>
  </mat-select>
</mat-form-field>

and using this component in my main parent form as

<meta-option-value [parent_form]="predictorQuestion"></meta-option-value>

I get the following error:

"Cannot find the control with the name: 'test_type'"

What am I missing here?

You are passing the complete FormGroup (predictorQuestion) to the child. You only need to pass the predictorQuestion.get('meta_types') to the parent_form as [parent_form]="predictorQuestion.get('meta_types')".

Angular: Cannot find control with name: 'date', in your createForm() function you didn't added the date FormControl createForm() { this.angForm = this.fb.group({ email: new FormControl('', [Validators.required  Cannot find control with unspecified name attribute Solution: Look for a statement in the HTML angular template like this: [formControl]="myCtrl"

pass the "control" itseft and use [FormControl] in your children

<meta-option-value [formControl]="predictorQuestion.get('meta_options')">
</meta-option-value>

Your meta-options

<mat-form-field fxFlex="25" [formControl]="formControl">
  ...

</mat-form-field>

//and add the Input
@Input()formControl: FormControl;

the same idea work if you need to pass a FormGroup or a Form Array

Answer: Cannot find control with name: formControlName in angular , Answer: Cannot find control with name: formControlName in angular reactive form You should specify formGroupName for nested controls I am trying to make a specific form field in my overall form dynamic so that x amount of objects can be added to the array of that field. However, every time the page inits I get a Error: Cannot find control with path: 'media -> ' This is my form.ts

Form Validation with Populated Data "Cannot find control with name , Hi, I am trying to add validations in my form. This is single form which is being used to add as well as edit data. Below is HTML code:  Cannot find control with unspecified name, dynamic formarrays 1 How to achieve the functionality in angular form where I want to render form-controls dynamically via sub-component?

How to fix Angular 'Cannot find control with unspecified name attribute', Cannot find control with name : store4567. Help Request. I have created a reactive forms. When looping the form everything is working fine but at second value  Create a student record management system app using Angular 7|8|9, Firebase 5|6 Database, Reactive Forms, Form Validation, NGX-Pagination and NGX-Toastr.

Cannot find control with name : store4567 : Angular2, When I invoke the fields for the submission form, this gives me the error. this Erorr : Cannot find control with unspecified name attribute. addProductFG:FormGroup;​  Cannot find control with name: 'aluno.id' Faça uma pergunta Perguntada 3 meses atrás. Ativa 3 meses atrás. Vista 80 vezes -2. Estou tentando enviar o id do aluno

FormArray : Cannot find control with unspecified name attribute in , Cannot find control with name: - angular. Stackblitz Example See also: Angular2 nested template driven form Of course, another way is passing FormGroup or  I try to make a dynamic form (so you can limitless add items to a list), but somehow the content of my list is not getting send because it can't find the control with path: Cannot find control with path: 'list_items -> list_item' My component:

Comments
  • Possible duplicate of Cannot find control with name: formControlName in angular 2 or 4