typescript Angular 7：“找不到具有未指定名称属性的控件”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54617707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 7: "Cannot find control with unspecified name attribute"
提问by dazito
I am creating my first Angular app and I am getting the following errors in dev mode console:
我正在创建我的第一个 Angular 应用程序，但在开发模式控制台中出现以下错误：
ERROR Error: "Cannot find control with unspecified name attribute"
ERROR Error: "Cannot find control with path: 'items -> name'"
ERROR Error: "Cannot find control with path: 'items -> height'"
ERROR 错误：“找不到具有未指定名称属性的控件”
ERROR 错误：“找不到带有路径的控件：'项目 -> 名称'”
ERROR 错误：“无法通过路径找到控件：'items -> height'”
I have read several SO answers (like this, thisthisand this) but I cannot pinpoint what I am doing wrong, my inexperience with Angular is not helping as well.
我已看过一些SO的回答（像这个，这个这个和这个），但我无法找出什么我做错了，我有角缺乏经验，没有帮助为好。
This is my component typescript code:
这是我的组件打字稿代码：
import {Component, OnInit} from '@angular/core';
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-pack-input',
templateUrl: './pack-input.component.html',
styleUrls: ['./pack-input.component.css']
})
export class PackInputComponent implements OnInit {
public boxForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.boxForm = this.formBuilder.group({
items: this.formBuilder.array([this.createBox()])
});
}
createBox(): FormGroup {
return this.formBuilder.group({
name: ['', [Validators.required, Validators.minLength(3)]],
height: ['', [Validators.required, Validators.minLength(3)]],
width: ['', [Validators.required, Validators.minLength(3)]],
length: ['', [Validators.required, Validators.minLength(3)]],
weight: ['', [Validators.required, Validators.minLength(3)]]
});
}
get items(): FormArray {
return this.boxForm.get('items') as FormArray;
}
addItem(): void {
this.items.push(this.createBox());
}
public onSubmit(formValue: any) {
console.log(formValue);
}
}
And here is my html component code:
这是我的 html 组件代码：
<div>
<div class="row">
<h3>Set the box size in meters</h3>
</div>
<form [formGroup]="boxForm" (ngSubmit)="onSubmit(boxForm.value)" >
<div class="row" formArrayName="items" *ngFor="let item of items.controls; let i = index;" [formGroupName]="i" style="margin-bottom: 10px">
<div class="form-group">
<div class="col-sm-5 form-group">
<label for="name">Name</label>
<input class="form-control" type="text" formControlName="name" placeholder="Name" />
</div>
<div class="col-sm-3 form-group">
<label for="name">Height</label>
<input class="form-control" type="text" formControlName="height" placeholder="Height" />
</div>
<div class="col-sm-3 form-group">
<label for="name">Width</label>
<input class="form-control" type="text" formControlName="width" placeholder="Width" />
</div>
<div class="col-sm-3 form-group">
<label for="name">Length</label>
<input class="form-control" type="text" formControlName="length" placeholder="Length"/>
</div>
<div class="col-sm-3 form-group">
<label for="name">Weight</label>
<input class="form-control" type="text" formControlName="weight" placeholder="Weight" />
</div>
<hr>
</div>
</div>
<button class="btn btn-success" type="submit" style="margin-right: 10px">Pack</button>
<button class="btn btn-primary" type="button" (click)="addItem()">New Box</button>
</form>
</div>
I see no typo in the formControlName="name"and formControlName="height"in the typescript code. I am totally lost.
我在打字稿代码中看到formControlName="name"和formControlName="height"中没有错字。我完全迷失了。
What am I doing wrong here?
我在这里做错了什么？
采纳答案by yurzui
You shouldn't use FormArrayName and FormGroupName on the same element:
您不应在同一元素上使用 FormArrayName 和 FormGroupName：
<div class="row" formArrayName="items" *ngFor="let item of items.controls; let i = index;">
<div class="form-group" [formGroupName]="i" >
回答by Linh
Try to declare your formGroupName one layer further down, like so:
尝试将您的 formGroupName 再往下一层声明，如下所示：
<div>
<div class="row">
<h3>Set the box size in meters</h3>
</div>
<form [formGroup]="boxForm" (ngSubmit)="onSubmit(boxForm.value)" >
<div class="row" formArrayName="items" *ngFor="let item of items.controls; let i = index;" style="margin-bottom: 10px">
<div class="form-group" [formGroupName]="i">
<div class="col-sm-5 form-group">
<label for="name">Name</label>
<input class="form-control" type="text" formControlName="name" placeholder="Name" />
</div>
<div class="col-sm-3 form-group">
<label for="name">Height</label>
<input class="form-control" type="text" formControlName="height" placeholder="Height" />
</div>
<div class="col-sm-3 form-group">
<label for="name">Width</label>
<input class="form-control" type="text" formControlName="width" placeholder="Width" />
</div>
<div class="col-sm-3 form-group">
<label for="name">Length</label>
<input class="form-control" type="text" formControlName="length" placeholder="Length"/>
</div>
<div class="col-sm-3 form-group">
<label for="name">Weight</label>
<input class="form-control" type="text" formControlName="weight" placeholder="Weight" />
</div>
<hr>
</div>
</div>
<button class="btn btn-success" type="submit" style="margin-right: 10px">Pack</button>
<button class="btn btn-primary" type="button" (click)="addItem()">New Box</button>
</form>
</div>
