在 angular 6 表单生成器中找不到具有未指定名称属性的控件 [英] Cannot find control with unspecified name attribute in angular 6 form builder

问题描述

我在尝试使用 HTML 文件更新网格表时收到此错误消息.

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

在这里，我使用了表格的静态数据来显示并从显示primeng 表格的其他组件导入，并且我添加了一个更新按钮，该按钮具有重定向到另一个页面以更新数据的功能.

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.

该问题出现在 HTML 文件的第一行，即；[formGroup]="myvehicle"

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>

推荐答案

我觉得主要问题在这里

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

你试图传递一个空变量

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.

还有这部分

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

可以简化

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

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

此处 patchValue 仅在路由器参数中具有正确 id 时运行

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

这篇关于在 angular 6 表单生成器中找不到具有未指定名称属性的控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！