Question

我正在关注此示例：http://plnkr.co/edit/hQ6RtzCfPosfQl4HlbZQ?p=preview以动态添加和删除表单元素。

html：在此文件>>zya$ psql -d postgres psql (9.6.3) Type "help" for help. postgres=# CREATE USER user1 WITH PASSWORD 'password1'; CREATE ROLE postgres=# GRANT ALL PRIVILEGES ON DATABASE my_db to user1; GRANT postgres=# \q中，未定义标识符“过滤器”。 >>zya$ psql -d my_db --username=user1 psql (9.6.3) Type "help" for help. my_db=> SELECT DISTINCT name FROM user_tbl order by id; ERROR: permission denied for relation user_tbl不包含此类成员。 FormGroup消息的属性控件，即使代码有效，并且选择不是独立的。选择一个级别会填充所有级别选择。

eventForm.controls.filters

app.module.ts

__type

component.ts

<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>

Answer 1

这是因为你只使用双向绑定只有一个变量，例如[(ngModel)]="filterUserLvl"，所以当你做出改变时，就意味着你所有的{ {1}}在表单中具有相同的值。

使用反应式表单时，强烈建议不要使用双向绑定，而是使用表单控件代替level。

还注意到您在数组中的每个表单组都缺少ngModel，因此我将其修改为..

formGroupName

然后只需从您的模板中删除<div formArrayName="filters"> <table *ngFor="let filters of eventForm.controls.filters.controls; let i=index" [formGroupName]="i"> ....和ngModel，它就可以了！

似乎你想要在更改select时触发更改事件，因为你可以传递实际的表单控件。

<强> DEMO

Angular2 - 嵌套表单元素

1 个答案: