Составной каскадный комбинированный компонент в угловых 7

Question

Я создаю компонент для управления каскадом страны и штата.Если я создаю только одну страну и одно государство, все работает отлично.Но когда я ставлю три страны и государства, то все развращается, как показано ниже.Как мне этого добиться?

Одна страна-государство (рабочий пример)

Stackblitz

Три страны-состояние (НЕ рабочий пример)

Stackblitz

Answer 1

У вас есть два элемента, которые имеют ссылку на одни и те же переменные:

<app-country [studentForm]="studentForm"></app-country>
<app-state [studentForm]="studentForm"></app-state>

<br/><br/>

<app-country [studentForm]="studentForm"></app-country>
<app-state [studentForm]="studentForm"></app-state> 

Каждый из компонентов имеет доступ к одному и тому же свойству класса studentForm.Если вы хотите, чтобы эта группа компонентов была заполнена отдельно, вы должны написать что-то вроде:

app.component.ts:

 this.studentForm = new FormGroup({
  'studentName':new FormControl(''),
  'countryId1': new FormControl(''),
  'stateId1': new FormControl(''),
  'countryId2': new FormControl(''),
  'stateId2': new FormControl('')
})

app.component.html:

<app-country [studentForm]="studentForm" [id]="'countryId1'"></app-country>
<app-state [studentForm]="studentForm" [id]="'stateId1'" [countryId]="'countryId1'"></app-state>

<br/><br/>

<app-country [studentForm]="studentForm" [id]="'countryId2'"></app-country>
<app-state [studentForm]="studentForm" [id]="'stateId2'" [countryId]="'countryId2'"></app-state>

А в вашей стране и штатах используйте countryId1 /countryId2 и stateId1 / stateId2 соответственно (также необходимо изменить компоненты страны и штата для использования параметра 'id').

ОБНОВЛЕНИЕ

В country.component.tsдобавить

@Input() id: string;

В state.component.ts добавить

@Input() id:string;
@Input() countryId:string;

get states(): State[]{
   var val = this.studentForm.controls[this.countryId].value;
   return this.selectService.filterStates(val);
};

В country / state.component.html изменить на:

<select [formControlName]="id">...

В select.service.ts change:

filterStates(countryId){
   if(!countryId) return null;
   return this.getStates().filter((item) => item.countryid == countryId);
}