在Angular2中具有多个选择的反应形式

我在Angular2中有一个动态表单 . 它是一个有4个选择的表单组 . 此表单还有一个按钮，允许您添加另外4个选项，如下所示：

<form [formGroup]="relationsForm">

<div formArrayName="selectedItems" *ngFor="let item of relationsForm.get('selectedItems').controls; let i=index">
    <div [formGroupName]="i">
        <div>
            <md-select placeholder="Source" formControlName="origin_source"   (change)="onChangeOrigin($event, i)">
                 <md-option *ngFor="let origin of selectedOrigins"  [value]="origin.name" >{{ origin.name }}</md-option> 
            </md-select>
            <md-select  placeholder="Field" formControlName="field_source">

            </md-select>
            <md-select  placeholder="Source1" formControlName="origin_dest" (change)="onChangeDest($event)" >
                 <md-option  *ngFor="let dest of selectedOrigins"  [value]="dest.name" >{{ dest.name }}</md-option> 
            </md-select>
            <md-select  placeholder="Field1" formControlName="field_dest">

            </md-select>
        </div>
    </div>

</div>

<button (click)='addRelation()'>ADD RELATIONS</button>

这应该如何工作？当您在第一个选择中选择任何值时，第二个选择必须显示一组具体的项目 .

第三个选择具有与第一个选择相同的值，并且具有与第四个选择相关的相同行为 .

这组数据是这样的：

this.origins = [{
  id: 1,
  name: 'origin1',
  desc: 'desc1',
  columnData: [{ id: 1, name: 'column1' },
  { id: 2, name: 'column2' }]
},
{
  id: 1,
  name: 'origin2',
   desc: 'desc2',
  columnData: [{ id: 1, name: 'columnA' },
  { id: 2, name: 'columnB' }]
},
{
  id: 1,
  name: 'origin3',
  desc: 'desc3',
  columnData: [{ id: 1, name: 'columnX' },
  { id: 2, name: 'columnY' }]
}]

当我们在第一个选择中选择原点时，我们必须在第二个选择时显示其columnData的值 . 当我们在第三个选择中选择原点时，可能在第一个和第三个选择时存在不同的原点 .

这是我的组成部分：

@Component({
  selector: 'app-fields-relation',
  templateUrl: './fields-relations.component.html',
  styleUrls: ['./fields-relations.component.scss']
 })
 export class FieldsRelationComponent implements OnInit {

   public relationsForm: FormGroup;
   public selectedItems: FormArray;

   @Input()
   private selectedOrigins: any[];
   public dest: any[];



  constructor(private _fb: FormBuilder) { }

   ngOnInit() {
     this.relationsForm = this._fb.group({
       selectedItems: this._fb.array([this.initRelationsForm()])
     });
   }

   initRelationsForm() {
     return this._fb.group({
       origin_source: [''],
       field_source: [''],
       origin_dest: [''],
       field_dest: ['']
     });
   }

   addRelation() {
     this.selectedItems = this.relationsForm.get('selectedItems') as FormArray;
     this.selectedItems.push(this.initRelationsForm());
  }
   onChangeOrigin(event, i) {
     console.log('on change origin: ' + i);
     this.dest = this.selectedOrigins[i].columnData;
   }
   onChangeDest(i) {
     console.log('on change dest: ' + i);
   }

 }

另外，正如我所提到的，可以添加另外4个具有相同行为的选择，但保持不同的值 .

我达到的最佳方法是以这种方式改变模型：

onChangeOrigin(event, i) {
   console.log('on change origin: ' + i);
    this.dest = this.selectedOrigins[i].columnData;
 }

但问题是这种情况下所有第二和第四选择共享相同的模型，当我们选择第一个或第三个选择时，所有第二个和第四个选择显示相同的值 .

此图像显示表单 .

提前致谢 .