Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

popular FormGroup com valores vindo da API

Possuo um formulário e quero preenche-lo ao iniciar com informações vindo da API. Atualmente estou passando os valores da seguinte forma:

<input type="text" formControlName='concentratorPort' class="form-control" id="inputConcentratorPort" placeholder="9092" [value]="navsSetting.ConcentratorPort">

Gostaria de utilizar através do FormGroup. Primeiro no construtor eu chamei o Form Builder

constructor(private settingsService: SettingsService, private formBuilder: FormBuilder) { }

Depois criei um Form Group:

settingsForm: FormGroup;

Não estou conseguindo setar os valores no FormGroup:

` this.settingsForm = this.formBuilder.group({ concentratorPort: ['this.navsSetting.ConcentratorPort'], Quando executo apresenta o erro: "Cannot read property 'ConcentratorPort' of undefined" Alguém pode indicar uma forma como posso alimentar esse formulário 'settingsForm' com objeto vindo da API?

3 respostas

Boa noite, Alberto! Como vai?

Vc poderia colar aqui o código completo da sua classe TS onde está tentando criar o FormGroup? Dessa forma poderei entender um pouco melhor a situação para tentar te ajudar de forma efetiva.

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';

import { ModelSettings } from 'src/app/Model/ModelSettings';
import { SettingsService } from '../settings.service';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit, OnChanges {

  navsSetting: ModelSettings;
  @Input() enterpriseIdEdit: number;
  @Input() pdvIdEdit: number;
  _pdvId: number;  
  meuPdv: number;
  settingsForm: FormGroup;

  constructor(private settingsService: SettingsService, private formBuilder: FormBuilder) { }

  loadSetting(){
    this.settingsService.getSettings(this.enterpriseIdEdit,this.pdvIdEdit)
    .subscribe(setting => {
      this.navsSetting = setting;      
    })        
  }

  loadForm(){
     this.settingsForm = this.formBuilder.group({
       enterprise: [this.navsSetting.EnterpriseId],
       pdv: [this.navsSetting.PdvId],
       serialPos: [this.navsSetting.PosSerial],
       tefAddress: [this.navsSetting.SitefAddressIp],
       tefPort: [this.navsSetting.SitefPort],
       tefEnterprise: [this.navsSetting.SitefStoreCode],
       satShare: [this.navsSetting.SatAddressSharePdv],
       satPort: [this.navsSetting.SatPortSharePdv],
       navsAddress: [''],
       navsPort: [''],
       concentratorAddress: [this.navsSetting.ConcentratorAddress],
       concentratorPort: [this.navsSetting.ConcentratorPort],
       charPlu: [''],
       saveXmlSat: ['']
     })      
  }

  receberEventoDePdv(_pdvIdValue){
    this._pdvId = _pdvIdValue;   
  }

  ngOnInit() {
    this.loadSetting();
    this.loadForm();    
  }

  ngOnChanges(){
    this.loadSetting();           
    this.loadForm();
  }
}
solução!

Andei pesquisando e consegui fazer da seguinte maneira:

loadSetting(){
    this.settingsService.getSettings(this.enterpriseIdEdit,this.pdvIdEdit)
    .subscribe(setting => {
      this.navsSetting = setting;
      this.loadForm(this.navsSetting);      
    })    
  }

  loadForm(_navsSetting: ModelSettings){
     this.settingsForm = this.formBuilder.group({       
       enterprise: [_navsSetting.EnterpriseId],
       pdv: [_navsSetting.PdvId],
       serialPos: [_navsSetting.PosSerial],
       tefAddress: [_navsSetting.SitefAddressIp],
       tefPort: [_navsSetting.SitefPort],
       tefEnterprise: [_navsSetting.SitefStoreCode],
       satShare: [_navsSetting.SatAddressSharePdv],
       satPort: [_navsSetting.SatPortSharePdv],
       navsAddress: [''],
       navsPort: [''],
       concentratorAddress: [_navsSetting.ConcentratorAddress],
       concentratorPort: [_navsSetting.ConcentratorPort],
       charPlu: [_navsSetting.NumberOfCharacteresPLU],
       saveXmlSat: [_navsSetting.SaveXMLSat]
     })          
  }

 ngOnInit() {
    this.loadSetting();    
  }

  ngOnChanges(){
    this.loadSetting();            
  }

Postei somente as partes que foram alteradas o restante continua igual. Agora está gerando um log no console somente quando inicio o componente:

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

       Example:


    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });

Apesar de gerar esse erro no console o formulário é carregado corretamente com as informações que preciso. Onde eu posso instanciar para não gerar mais esse erro?

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software