Cannot find control with unspecified name attribute in angular 6 form builder

Question

I got this error message when trying to update the grid table with the HTML file.

Here I have used static data for the table to display and imported from other component which displays the primeng table and I have added an update button with a function which redirects to another page for updating of data.

The issue is seen in the first line in the HTML file i.e; [formGroup]="myvehicle"

I have tried checking with a different form group name but still the issue is same.

import { Component, OnInit } from '@angular/core';
import {Router, ActivatedRoute, Params} from '@angular/router';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-crud',
  templateUrl: './crud.component.html',
})
export class CrudComponent implements OnInit {
  myvehicle: FormGroup;
  display: boolean;
  id: number;
  vin: any;
  year: number;
  brand: string;
  color: string;
  vehicle: any;
  Data: any;

  constructor(private activatedRoute: ActivatedRoute, private fb: FormBuilder) {
   }

  ngOnInit() {
    this.myvehicle = this.fb.group({
    vin: [''],
    year: [''],
    brand: [''],
    color: ['']
  });
    this.vehicle = [
      {
       id: 1 , vin: 'dsad231ff' , year : 2012 , brand: 'VW' , color: 'Orange'
      },
      {
        id: 2 , vin: 'gwregre345' , year : 2011 , brand: 'Audi' , color: 'Black'
      },
      {
        id: 3 , vin: 'h354htr' , year : 2005 , brand: 'Renault' , color: 'Gray'
      },
      {
        id: 4, vin: 'j6w54qgh' , year : 2003 , brand: 'BMW', color: 'Blue'
      },
      {
        id: 5, vin: 'hrtwy34' , year : 1995 , brand: 'Mercedes' , color: 'Orange'
      }
    ];
    debugger
    this.activatedRoute.paramMap
    .subscribe( params => {
    this.id = +params.get('id');
    });

      this.vehicle.forEach(element => {
        if (element.id === this.id) {
            this.Data = element;
              }
      });
      this.myvehicle.patchValue({
        vin: this.Data.vin,
        year: this.Data.year,
        brand: this.Data.brand,
        color:  this.Data.color
      });
  }

}

<form [formGroup]="myvehicle">
<label >Vin:</label>
<input type="text" [formControlName]="vin" ><br><br>
<label >Year:</label>
<input type="text" [formControlName]="year" ><br><br>
<label >Brand:</label>
<input type="text" [formControlName]="brand" ><br><br>
<label >Color:</label>
<input type="text" [formControlName]="color" ><br><br>
</form>

I've removed your descriptive text out of the code snippet and into the main body of the question so that it can be read more easily. I've also made some minor grammatical improvements — Nick, Dec 18 '18 at 12:46

score 6 · Accepted Answer · answered Dec 18 '18 at 17:03

I think the main problem is here

<input type="text" [formControlName]="vin" ><br><br>

you trying to pass an empty variable

vin: any;

as control name, this can be fixed in this way:

<input type="text" formControlName="vin" ><br><br>

just remove square brackets and set control name as string.

it should fix your issue.

also, this part

  this.activatedRoute.paramMap
.subscribe( params => {
this.id = +params.get('id');
});

  this.vehicle.forEach(element => {
    if (element.id === this.id) {
        this.Data = element;
          }
  });
  this.myvehicle.patchValue({
    vin: this.Data.vin,
    year: this.Data.year,
    brand: this.Data.brand,
    color:  this.Data.color
  });

can be simplified

    this.activatedRoute.paramMap
  .subscribe(params => {
    const id = params.get('id');

    if (this.vehicle[id]) {
      this.myvehicle.patchValue(this.vehicle[id]);
    }
  });

here patchValue runs only when you have a correct id in router params

' this.activatedRoute.paramMap .subscribe(params => { const id = params.get('id'); if (this.vehicle[id]) { this.myvehicle.patchValue(this.vehicle[id]); } }); this value is showing the value of next row when clicking on update — anirudh talluri, Dec 19 '18 at 07:31

Cannot find control with unspecified name attribute in angular 6 form builder

1 Answers1

Linked