Reactive form with multiple select in Angular2

Question

I have a dynamic form in Angular2. Its a form group with 4 selects. This form, also have a button that allows you to add another 4 selects like this:

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

How this should work? When you choose any value at the first select, the second select have to show a concrete set of items.

The third select has the same values that the first, and has the same behavior, related to the forth select.

The set of data is this:

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' }]
}]

When we choose an origin at the first select, we have to show at the second select the values of its columnData. And when we choose an origin at the third select, the same, being possible that at the first and third exists differents origins.

This is my component:

@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);
   }

 }

Also, as i have mentioned, is possible adding another 4 selects with the same behavior, but keeping different values.

The best approach i have reached is change the model in this way:

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

But the problem is this case that all the second and forth selects are sharing the same model, and when we choose the first or third select, all the second and forth selects show the same value.

This image shows the form.

Thanks in advance.