我遵循以下示例:http://plnkr.co/edit/hQ6RtzCfPosfQl4HlbZQ?p=preview动态添加和删除表单元素。
html:此文件中的eventForm.controls.filters
提供了一个标识符,未定义“过滤器”。 __type
不包含这样的成员。 FormGroup消息的属性控件,即使代码有效,并且选择也不是独立的。选择一个级别将填充所有级别的选择。
<table class="example-full-width" cellspacing="0" formArrayname="filters" *ngFor="let filters of eventForm.controls.filters.controls; let i=index">
<span>Address {{i + 1}}</span>
<span *ngIf="eventForm.controls.filters.controls.length > 1" (click)="removeFilters(i)">x</span>
<tr>
<td>
<md-select [(ngModel)]="filterUserOcc" [ngModelOptions]="{standalone: true}" placeholder="Occupation" (ngModelChange)="filterUserOccupation()">
<md-option [value]="null">Occupation</md-option>
<md-option *ngFor="let occupation of occupations | async" [value]="occupation.occupation">
{{ occupation.occupation }}
</md-option>
</md-select>
</td>
</tr>
<tr>
<td>
<md-select [(ngModel)]="filterUserLvl" [ngModelOptions]="{standalone: true}" placeholder="Level" (ngModelChange)="filterUserLevel()">
<md-option [value]="null">Level</md-option>
<md-option *ngFor="let level of levels | async" [value]="level.level">
{{ level.level }}
</md-option>
</md-select>
</td>
</tr>
</table>
app.module.ts
...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
imports: [
...
ReactiveFormsModule,
...
],
component.ts
...
import { FormGroup, FormControl, FormArray, FormBuilder, Validators } from '@angular/forms';
...
export class NewEventComponent implements OnInit {
eventForm: FormGroup;
...
constructor(
...
private formBuilder: FormBuilder,
...
) {
...
}
ngOnInit() {
this.eventForm = this.formBuilder.group({
...
filters: this.formBuilder.array([
this.initFilters()
])
});
}
initFilters() {
return this.formBuilder.group({
level: ['', Validators.required],
occupation: ['']
});
}
addFilters() {
const control = <FormArray>this.eventForm.controls['filters'];
control.push(this.initFilters());
}
removeFilters(i: number) {
const control = <FormArray>this.eventForm.controls['filters'];
control.removeAt(i);
}
最佳答案
这是因为您正在使用双向绑定,例如仅一个变量用于level(即[(ngModel)]="filterUserLvl"
),因此在进行更改时,这意味着所有level
在表单中都具有相同的值。
当使用反应形式时,强烈不建议使用双向绑定,而是使用形式控件代替ngModel
。
还注意到数组中每个表单组都缺少formGroupName
,所以我将其修改为。
<div formArrayName="filters">
<table *ngFor="let filters of eventForm.controls.filters.controls; let i=index"
[formGroupName]="i">
....
然后只需从模板中删除
ngModel
和ngModelChange
即可正常工作!似乎您希望在更改选择内容时触发更改事件,为此,您可以传递实际的表单控件。
DEMO
关于javascript - Angular2-嵌套表单元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44710000/