Povoando dinamicamente estado e cidade

src/models/cidade.dto.ts

@@ -0,0 +1,4 @@
+export interface CidadeDTO {
+    id: string;
+    nome: string;
+}

src/models/estado.dto.ts

@@ -0,0 +1,4 @@
+export interface EstadoDTO {
+    id: string;
+    nome: string;
+}

src/pages/signup/signup.html

@@ -71,15 +71,13 @@
     <ion-item>
       <ion-label stacked>Estado*</ion-label>
       <ion-select formControlName="estadoId" (ionChange)="updateCidades()">
-        <ion-option value="1">Minas Gerais</ion-option>
-        <ion-option value="2">São Paulo</ion-option>
+        <ion-option *ngFor="let estado of estados; first as f" [value]="estado.id" [selected]="f">{{estado.nome}}</ion-option>
       </ion-select>
     </ion-item>
     <ion-item>
       <ion-label stacked>Cidade*</ion-label>
       <ion-select formControlName="cidadeId">
-        <ion-option value="1">Uberlândia</ion-option>
-        <ion-option value="2">Campinas</ion-option>
+        <ion-option *ngFor="let cidade of cidades" [value]="cidade.id">{{cidade.nome}}</ion-option>
       </ion-select>
     </ion-item>
     <button ion-button block type="submit">Criar conta</button>

src/pages/signup/signup.module.ts

@@ -1,6 +1,9 @@
 import { NgModule } from '@angular/core';
 import { IonicPageModule } from 'ionic-angular';
 import { SignupPage } from './signup';
+import { CidadeService } from '../../services/domain/cidade.service';
+import { EstadoService } from '../../services/domain/estado.service';
+
 
 @NgModule({
   declarations: [
@@ -9,5 +12,9 @@ import { SignupPage } from './signup';
   imports: [
     IonicPageModule.forChild(SignupPage),
   ],
+  providers: [
+    CidadeService,
+    EstadoService
+  ]
 })
 export class SignupPageModule {}

src/pages/signup/signup.ts

@@ -1,6 +1,10 @@
 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { CidadeService } from '../../services/domain/cidade.service';
+import { EstadoService } from '../../services/domain/estado.service';
+import { EstadoDTO } from '../../models/estado.dto';
+import { CidadeDTO } from '../../models/cidade.dto';
 
 @IonicPage()
 @Component({
@@ -10,31 +14,55 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 export class SignupPage {
 
   formGroup: FormGroup;
+  estados: EstadoDTO[];
+  cidades: CidadeDTO[];
 
   constructor(
-    public navCtrl: NavController, 
+    public navCtrl: NavController,
     public navParams: NavParams,
-    public formBuilder: FormBuilder) {
+    public formBuilder: FormBuilder,
+    public cidadeService: CidadeService,
+    public estadoService: EstadoService) {
 
     this.formGroup = this.formBuilder.group({
       nome: ['Joaquim', [Validators.required, Validators.minLength(5), Validators.maxLength(120)]],
       email: ['joaquim@gmail.com', [Validators.required, Validators.email]],
-      tipo : ['1', [Validators.required]],
-      cpfOuCnpj : ['06134596280', [Validators.required, Validators.minLength(11), Validators.maxLength(14)]],
-      senha : ['123', [Validators.required]],
-      logradouro : ['Rua Via', [Validators.required]],
-      numero : ['25', [Validators.required]],
-      complemento : ['Apto 3', []],
-      bairro : ['Copacabana', []],
-      cep : ['10828333', [Validators.required]],
-      telefone1 : ['977261827', [Validators.required]],
-      telefone2 : ['', []],
-      telefone3 : ['', []],
-      estadoId : [null, [Validators.required]],
-      cidadeId : [null, [Validators.required]]      
+      tipo: ['1', [Validators.required]],
+      cpfOuCnpj: ['06134596280', [Validators.required, Validators.minLength(11), Validators.maxLength(14)]],
+      senha: ['123', [Validators.required]],
+      logradouro: ['Rua Via', [Validators.required]],
+      numero: ['25', [Validators.required]],
+      complemento: ['Apto 3', []],
+      bairro: ['Copacabana', []],
+      cep: ['10828333', [Validators.required]],
+      telefone1: ['977261827', [Validators.required]],
+      telefone2: ['', []],
+      telefone3: ['', []],
+      estadoId: [null, [Validators.required]],
+      cidadeId: [null, [Validators.required]]
     });
   }
 
+  ionViewDidLoad() {
+    this.estadoService.findAll()
+      .subscribe(response => {
+        this.estados = response;
+        this.formGroup.controls.estadoId.setValue(this.estados[0].id);
+        this.updateCidades();
+      },
+        error => { });
+  }
+
+  updateCidades() {
+    let estado_id = this.formGroup.value.estadoId;
+    this.cidadeService.findAll(estado_id)
+      .subscribe(response => {
+        this.cidades = response;
+        this.formGroup.controls.cidadeId.setValue(null);
+      },
+        error => { });
+  }
+
   signupUser() {
     console.log("enviou o form");
   }

src/services/domain/cidade.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { API_CONFIG } from "../../config/api.config";
+import { CidadeDTO } from "../../models/cidade.dto";
+import { Observable } from "rxjs/Rx";
+
+@Injectable()
+export class CidadeService {
+
+    constructor(public http: HttpClient) {
+    }
+
+    findAll(estado_id : string) : Observable<CidadeDTO[]>  {
+        return this.http.get<CidadeDTO[]>(`${API_CONFIG.baseUrl}/estados/${estado_id}/cidades`);
+    }
+}

src/services/domain/estado.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { API_CONFIG } from "../../config/api.config";
+import { EstadoDTO } from "../../models/estado.dto";
+import { Observable } from "rxjs/Rx";
+
+@Injectable()
+export class EstadoService {
+
+    constructor(public http: HttpClient) {
+    }
+
+    findAll() : Observable<EstadoDTO[]>  {
+        return this.http.get<EstadoDTO[]>(`${API_CONFIG.baseUrl}/estados`);
+    }
+}