2
几天以来，我一直在试图创建一个表单，它会让用户创建一个产品，同时产品的变体可能会有一个与父产品不同的价格。例如大部件是10英镑，小部件是5英镑。每次我最终得到的是FormArray中的FormArray，换句话说，我有一个具有一系列变体的产品，这些变体有价格，但也有一系列属性。问题出现在我尝试添加控件时，我可以获得变体价格以显示出来，但我无法获取路径以添加variations.attributes控件，我只是得到一个有关ngFor的错误与数组不是[对象，对象]或控制为空...我有更多的错误比我记得！无论如何，我的代码已被重新编写，并且可能比开始时更糟！Angular 4反应形式 - FormArray在FormArray中无法获取路径
第一形式在我的OnInit：
ngOnInit() {
this.getAttributes(); // Get Attribute Categories
this.form = this.fb.group({
name: [''],
price: [''],
description: [''],
stockRef: [''],
attributes: this.fb.array([{
attributeCategoryId: [''],
name: [''],
}]),
variations: this.fb.array([{
vprice: this.vprice,
vattributes: this.vattributes
}]),
});
}
对于法师的产品，其工作正常添加和删除属性的部分：
addAttribute(id: any, name: any) {
if (!id.value || !name.value)
return;
this.attributes = <FormArray>this.form.get('attributes');
var newAttribute = this.fb.group({
attributeCategoryId: [id.value],
name: [name.value],
});
this.newlist.push({ name: [name.value].toString(), attributeCategoryId: [id.value].toString() });
this.attributes.push(newAttribute);
id.value = '';
name.value = '';
}
removeAttr(i: any) {
this.attributes.removeAt(i);
this.list2 = [];
this.newlist.splice(i, 1);
}
，我加变化的部分，它的工作原理，它仍然有我用来尝试和复制添加到主要产品的属性的代码，到我认为可行的变体中，但是无法访问这些值以显示它们，variations.attributes didn为路径工作。
initVariation() {
let v = this.fb.group({
price: [''],
vattributes: this.attributes //COPIES main attributes
});
this.attributes.reset(); //Reset the main attributes as they now
return v; //belong to a variation
}
addNewVar() {
const control = <FormArray>this.form.controls['variations'];
control.push(this.initVariation());
}
，增加属性的变化，这是不行的，并且是我在我的component.ts问题的部分
addAttrRow() {
const control = <FormArray>this.form.controls['variations.vattributes']
control.push(this.initVattr())
}
initVattr() {
let va = this.fb.group({
vattributeCategoryId: [''],
vname: ['']
})
return va;
}
最后，我的html这更加的一个烂摊子大声笑：
<h1>New Product</h1>
<form [formGroup]="form" (ngSubmit)="save()">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="form-group">
<label>Product Name</label>
<div *ngIf="!form.get('name').valid" class="alert alert-danger">
{{ form.get('name').getError('remote') }}
</div>
<input [(ngModel)]="name" type="text" formControlName="name" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="form-group">
<label>Price</label>
<div *ngIf="!form.get('price').valid" class="alert alert-danger">
{{ form.get('price').getError('remote') }}
</div>
<input [(ngModel)]="price" type="number" formControlName="price" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="form-group">
<label>Product Description</label>
<div *ngIf="!form.get('description').valid" class="alert alert-danger">
{{ form.get('description').getError('remote') }}
</div>
<textarea formControlName="description" class="form-control"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div>
<h4>Attributes</h4>
<div class="form-inline" >
<div class="form-group">
<div formArrayName="attributes">
<select #ac name="attributeCategoryId">
<option value="" selected>Category</option>
<option *ngFor="let a of attriblist;let i = index" value="{{a.id}}">{{a.name}}</option>
</select>
<input #a name="name" placeholder="Attribute name" />
</div>
</div>
<button type="button" class="btn btn-default" (click)="addAttribute(ac,a)">Add Attribute</button>
</div>
<br>
<table class="table-bordered table table-striped">
<thead>
<tr>
<th>Attr. Category</th>
<th>Attr.</th>
<th><button type="button" (click)="addNewVar()" class="btn btn-primary">Add Variation</button></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let a of form.value.attributes; let i = index;" >
<td *ngIf="i > 0">{{a.attributeCategoryId}}</td>
<td *ngIf="i > 0">{{a.name}}</td>
<td *ngIf="i > 0"><button (click)="removeAttr(i)" class="btn btn-danger">X</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--Variations Start-->
<div class="row" formArrayName="variations">
<div *ngFor="let variation of form.controls.variations.controls; let i=index" [formGroupName]="i">
<h5>Variation #{{ i + 1 }}</h5>
<p></p>
<div class="form-group">
<label>Variation Price</label>
<input name="vprice" style="max-width:50px" class="form-control">
</div>
<table>
<thead>
<tr>
<th>Attr. Category</th>
<th>Attr.</th>
<th><button class="btn btn-success" (click)="addAttrRow()">+</button></th>
</tr>
</thead>
<tbody name="vattributes">
<tr *ngFor="let attribute of variation.get('vattributes'); let ii = index;">
<td><input type="text" name="vattributeCateforyId" /></td>
<td><input type="text" name="vname" /></td>
<td><button (click)="removeVAttr(ii)" class="btn btn-danger">X</button></td>
</tr>
</tbody>
</table>
<button class="btn btn-danger" (click)="removeVariation(i)">Delete</button>
</div>
</div>
<!--Variations End-->
<br>
<p>
<button type="submit" class="btn btn-primary">Save</button>
</p>
</form>
我有疑问，我们可以了解您的属性和变化应该链接，但与此https://plnkr.co/edit/9FcYTmz15t7hkVlTtBdD?p=preview我删除用户后的属性列表开始增加了具有这些属性 – yurzui
@yurzui啊新变化所以不用加在声明的控制/阵列，以及添加属性行变化时使用“常量控制= this.form.get（[‘变化’，索引‘vattributes’]）;” （我错过了从路径索引）现在我明白了当我无法找到控制变体> 0>变量时的错误！谢谢。如果你能做出这个答案，我会相应地标记它。 –