Angular 4反应形式 - FormArray在FormArray中无法获取路径
问题描述:
几天以来,我一直在试图创建一个表单,它会让用户创建一个产品,同时产品的变体可能会有一个与父产品不同的价格。例如大部件是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>
答
我看到你的代码中的很多错误。
例如
1)你应该知道,我们需要的不是忘掉索引时处理得到控制从FormArray
所以不是
const control = <FormArray>this.form.controls['variations.vattributes'];
我们应该使用
addAttrRow(index) {
const control = <FormArray>this.form.get(['variations', index, 'vattributes']);
2)如果您没有指定button
的类型,则它将有submit
作为默认值。
<button class="btn btn-success" (click)="addAttrRow()">+</button>
它可能导致不可预知的情况。
所以尝试指定type="button"
3)您遍历对象
*ngFor="let attribute of variation.get('vattributes');
,而你需要数组遍历
*ngFor="let variation of form.controls.variations.controls;
我创建Plunker Example,可以帮助你意识到你做错了什么
我有疑问,我们可以了解您的属性和变化应该链接,但与此https://plnkr.co/edit/9FcYTmz15t7hkVlTtBdD?p=preview我删除用户后的属性列表开始增加了具有这些属性 – yurzui
@yurzui啊新变化所以不用加在声明的控制/阵列,以及添加属性行变化时使用“常量控制= this.form.get([‘变化’,索引‘vattributes’]);” (我错过了从路径索引)现在我明白了当我无法找到控制变体> 0>变量时的错误!谢谢。如果你能做出这个答案,我会相应地标记它。 –