<div class="create-account">
  <h2>Create Account</h2>
  <div class="row">
    <div class="col-md-6">
      <form [formGroup]="createAccountForm">
        <div class="form-group">
          <select formControlName="country" class="form-control" (change)="onChangeCountry($event.target.value)">
            <option value="">Select country...</option>
            <option *ngFor="let country of countries" [value]="country.id">{{country.country_name}}</option>
          </select>
        </div>
        <div class="form-group">
          <select formControlName="state" class="form-control" (change)="onChangeState($event.target.value)">
            <option value="">Select state...</option>
            <option *ngFor="let state of states" [value]="state.id">{{state.state_name}}</option>
          </select>
        </div>
        <div class="form-group">
          <select formControlName="city" class="form-control">
            <option value="">Select city...</option>
            <option *ngFor="let city of cities" [value]="city.id">{{city.city_name}}</option>
          </select>
        </div>
      </form>
    </div>
  </div>
</div>