Estou com problema novamente, com relação a forma assíncrona de carregamento do Java script. conforme no topico que eu abri anteriormente.
Desta vez consigo fazer os dados serem carregados, porem eles não são exibidos por completo no formulário. Geralmente só aparece a partir do terceiro campo, e os três primeiros ficam vazios. segue como está o código atualmente.
service de conexão com WS
@Injectable()
export class FornecedorApiService {
private _fornecedor: Fornecedor = new Fornecedor();
constructor(private _api: Api) { }
public getFornecedorPorId(id: number): Observable<Fornecedor> {
return this._api.buscaJsonDaApiPorId('fornecedor', id);
}
public getEstados(): Observable<Uf> {
return this._api.buscaJsonDaApiPorUrl('uteis/estados');
}
}appComponent
export class AlterarDadosFornecadorComponent implements OnInit {
@Input() fornecedor: Fornecedor = new Fornecedor();
public formFornecedor: FormGroup;
public endereco: Endereco = new Endereco();
public estadosElements: SelectItem[] = [];
constructor(
private _fb: FormBuilder,
private _fornecedorService: FornecedorApiService
) { }
ngOnInit() {
if (this.fornecedor.id == null) {
this._fornecedorApi
.getFornecedorPorId(1)
.subscribe(data => {
this.fornecedor = <Fornecedor>data;
this._fornecedorService
.getEstados()
.subscribe((dataUf: Object[]) => {
const estados: Array<Uf> = new Array<Uf>();
dataUf.forEach((elemento: Uf) => {
estados.push(elemento);
this.constroiFormulario();
});
});
}
}
constroiFormulario() {
this.formFornecedor = this._fb.group({
nome: [this.fornecedor.nome],
cnpj: [this.fornecedor.cnpj],
contato: [this.fornecedor.nomeContato],
telefone: [this.fornecedor.telefone],
email: [this.fornecedor.email],
formEndereco: this._fb.group({
bairro: [this.fornecedor.endereco.bairro],
cep: [this.fornecedor.endereco.cep],
rua: [this.fornecedor.endereco.rua],
complemento: [this.fornecedor.endereco.complemento],
formEstado: this._fb.group({
nome: [this.fornecedor.endereco.estado.nome],
estado: [this.fornecedor.endereco.estado.uf]
})
});
}
}HTML
<form [formGroup]="formFornecedor">
<table>
<tr>
<td>
<b>Nome </b>
</td>
<td>
<input type="text" pInputText formControlName="nome">
</td>
</tr>
<tr>
<td>
<b>CNPJ: </b>
</td>
<td>
<input type="text" pInputText formControlName="cnpj">
</td>
</tr>
<td>
<b>Nome para contato: </b>
</td>
<td>
<input type="text" pInputText formControlName="contato">
</td>
</tr>
---mais campos de formulário --
<table formName="formGrupEndereco">
<tr>
<td>
<b>Rua: </b>
</td>
<td>
<input type="text" pInputText formControlName="rua">
</td>
</tr>
---mais campos de formulário --
<b>Estado: </b>
</td>
<td>
<input type="text" pInputText formControlName="estado">
</td>
</tr>
</form>Em resumo minha última ideia foi fazer a subscribe no fornecedor e dentro do fornecedor fazer a subscribe no estado.
Ele exibe os dados porem os três primeiros campos aparece como undefined e o campo no HTML fica vazio, após isto dá tempo de carregar o fornecedor do Json e preenche os outros campos porem os primeiros permanecem vazios.
já tentei colocar o método constroiFormulario() fora do subscrible porem ai não aparece nenhum dados.
Acredito que essa forma não seja a correta, como eu faço para pegar os dados de mais de um WS diferente e preencher o form no html. (OBS: se alguém souber de um artigo que possa me ajudar a estudar mais sobre esta parte do angular, eu agradeço)
