Угловой 7: FormArray + выбрать изменение + запрос GET - PullRequest
Новая
       11

Угловой 7: FormArray + выбрать изменение + запрос GET

0 голосов
/ 25 июня 2019

Я создаю и использую FormArray, чтобы добавить более одного campus к school.Каждый campus имеет выбранный вход для country, state и city, которые являются динамическими и отправляют запросы API GET на change.

Проблема в том, что, когда я меняю страну кампуса 2, функция изменения делает запрос и обновляет список состояний обоих кампусов.

Как создать разные массивы штатов и городов для каждого кампуса?

ФАЙЛ HTML 

<form [formGroup]="campusInformationForm" (ngSubmit)="onSubmit(campusInformationForm)" novalidate>
  <div formArrayName="campuses"
    *ngFor="let campus of campusInformationForm.get('campuses')['controls']; let i = index;">
    <div class="row" [formGroupName]="i">
      <h4 class="large-body--bold">Campus {{i + 1 }}</h4>

      <label for="country_id">Country</label>
      <select value="" formControlName="country_id"
        (change)="getStatesByCountry(campusInformationForm.get('campuses').value[i]['country_id'])">
        <option value="" selected disabled>Select a country</option>
        <option [value]="country.id" *ngFor="let country of countries">{{country.name}}</option>
      </select>

      <label for="state_id">State</label>
      <select value="" formControlName="state_id"
        (change)="getCitiesByState(campusInformationForm.get('campuses').value[i]['state_id'])">
        <option value="" selected disabled>Select a state</option>
        <option [value]="state.id" *ngFor="let state of states">{{state.name}}</option>
      </select>

      <label for="city_id">City</label>
      <select value="" formControlName="city_id">
        <option value="" selected disabled>Select a city</option>
        <option [value]="city.id" *ngFor="let city of cities">{{city.name}}</option>
      </select>
    </div>
  </div>
</form>

ФАЙЛ ТС 

  countries: Array<Country>
  states: Array<State>
  cities: Array<City>

  ngOnInit() {
    this.getCountries();

    this.campusInformationForm = this.fb.group({
      campuses: new FormArray([])
    })
  }

  getStatesByCountry(id) {
    this.geo.getStatesById(id).subscribe(response => {
      this.states = response['states'];
    }, error => {
      console.log(error);
    })
  }

  getCitiesByState(id) {
    this.geo.getCitiesById(id).subscribe(response => {
      this.cities = response['cities'];
    }, error => {
      console.log(error);
    })
  }

  private getCountries() {
    this.geo.getCountries().subscribe(response => {
      this.countries = response['countries'];
    }, error => {
      console.log(error);
    })
  }

Я ожидаюобновлять только список опций штатов Campus 2, если я поменяю страну.Но когда я меняю страну одного из кампусов, оба списка штатов обновляются.

...