我遵循以下示例: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">
....


然后只需从模板中删除ngModelngModelChange即可正常工作!

似乎您希望在更改选择内容时触发更改事件,为此,您可以传递实际的表单控件。

DEMO

关于javascript - Angular2-嵌套表单元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44710000/

10-16 10:50
查看更多