Dislay data into FormControl

Ionic Framework ionic-v3
1

Hello, I’m trying to call a function and display data that I get in return of it into a FormControl.

This is my code but I get undefined.

private iobAnagrafica: any = [];
private formAnagrafica: FormGroup

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private privacyProvider: PrivacyProvider,
    private formBuilder: FormBuilder
    ) {
    this.myParam = navParams.get('myParam');
    console.log(this.myParam);
    this.getAnagrafica();
    console.log(this.iobAnagrafica);
    this.formAnagrafica = this.formBuilder.group({
      ID_INSTALLATO: new FormControl(this.iobAnagrafica.id_installato),
      ID_ANAGRAFICA: new FormControl(this.iobAnagrafica.id_anag),
      ID_PRODUTTORE: new FormControl(this.iobAnagrafica.id_produttore),
      ID_GRUPPO: new FormControl(this.iobAnagrafica.id_gruppo),
      ID_INSTALLATORE: new FormControl(this.iobAnagrafica.id_installatore)
    });
  }

  getAnagrafica(){
    this.privacyProvider.getIOBAnagrafica(this.myParam).subscribe((data) => {
      if (data) {
        this.iobAnagrafica = data;
        console.log(this.iobAnagrafica);
      }
    })
  }

How can I solve this issue?

2

You’re not waiting for your subscription to finish.

private iobAnagrafica: any = [];
private formAnagrafica: FormGroup

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private privacyProvider: PrivacyProvider,
    private formBuilder: FormBuilder
    ) {

    this.myParam = navParams.get('myParam');

    console.log(this.myParam);

    this.getAnagrafica().then(() => {
       console.log(this.iobAnagrafica);
       this.formAnagrafica = this.formBuilder.group({
          ID_INSTALLATO: new FormControl(this.iobAnagrafica.id_installato),
          ID_ANAGRAFICA: new FormControl(this.iobAnagrafica.id_anag),
          ID_PRODUTTORE: new FormControl(this.iobAnagrafica.id_produttore),
          ID_GRUPPO: new FormControl(this.iobAnagrafica.id_gruppo),
          ID_INSTALLATORE: new FormControl(this.iobAnagrafica.id_installatore)
       });
    });
    
  }

  getAnagrafica(){
   return new Promise((resolve, reject) =>{
    this.privacyProvider.getIOBAnagrafica(this.myParam).subscribe((data) => {
      if (data) {
        this.iobAnagrafica = data;
        console.log(this.iobAnagrafica);
        resolve(true);
      } else {
         reject();
      }
    })
   });
   
  }

I’ve not checked if all the semi-colons are in the right place but hopefully should give you an idea.

3

error into the HTML on this line with error: Cannot read property ‘get’ of undefined
<ion-item> <ion-label stacked>ID ANAGRAFICA</ion-label> <ion-input formControlName="ID_ANAGRAFICA" [(ngModel)]="iobAnagrafica.id_anag" type="text"></ion-input> </ion-item>

4

Your form has to wait for the data to be available.

private iobAnagrafica: any = [];
private formAnagrafica: FormGroup

formLoaded = false;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private privacyProvider: PrivacyProvider,
    private formBuilder: FormBuilder
    ) {

    this.myParam = navParams.get('myParam');

    console.log(this.myParam);

    this.getAnagrafica().then(() => {
       console.log(this.iobAnagrafica);
       this.formAnagrafica = this.formBuilder.group({
          ID_INSTALLATO: new FormControl(this.iobAnagrafica.id_installato),
          ID_ANAGRAFICA: new FormControl(this.iobAnagrafica.id_anag),
          ID_PRODUTTORE: new FormControl(this.iobAnagrafica.id_produttore),
          ID_GRUPPO: new FormControl(this.iobAnagrafica.id_gruppo),
          ID_INSTALLATORE: new FormControl(this.iobAnagrafica.id_installatore)
       });
       this.formLoaded = true;
    });
    
  }

  getAnagrafica(){
   return new Promise((resolve, reject) =>{
    this.privacyProvider.getIOBAnagrafica(this.myParam).subscribe((data) => {
      if (data) {
        this.iobAnagrafica = data;
        console.log(this.iobAnagrafica);
        resolve(true);
      } else {
         reject();
      }
    })
   });
   
  }

Then your html…

<ion-list *ngIf="formLoaded">
   Your form contents....
   If it's not an ion-list your content is in but instead a div or whatever it just needs swapping out
</ion-list>
5

like this?

<ion-list *ngIf="formLoaded">
  <form [formGroup]="formAnagrafica">
    <ion-item>
      <ion-label stacked>ID INSTALLATO</ion-label>
      <ion-input formControlName="ID_INSTALLATO" [(ngModel)]="iobAnagrafica.id_installato" type="text"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked>ID ANAGRAFICA</ion-label>
      <ion-input formControlName="ID_ANAGRAFICA" [(ngModel)]="iobAnagrafica.id_anag" type="text"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked>ID PRODUTTORE</ion-label>
      <ion-input formControlName="ID_PRODUTTORE" [(ngModel)]="iobAnagrafica.id_produttore" type="text"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked>ID GRUPPO</ion-label>
      <ion-input formControlName="ID_GRUPPO" [(ngModel)]="iobAnagrafica.id_gruppo" type="text"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked>ID INSTALLATORE</ion-label>
      <ion-input formControlName="ID_INSTALLATORE" [(ngModel)]="iobAnagrafica.id_installatore" type="text"></ion-input>
    </ion-item>
  </form>
</ion-list>
6

Sure.

Also looking at that code I’m not sure you need both the formControlName and the ngModel.

7

I’m getting a blank page, no form returned

8

Debug it. Suspect the formLoaded is not getting flipped

9

I’m not seeing anything wrong, is this ng if formloaded correct?

10

Looks correct.

Put a debugger statement just before you build the form.

console.log(this.iobAnagrafica)
debugger;

See if it hits.

Or if you want to share a repo that’s cool. But I only accept repos that fail on their own, not ones that are tied into other stuff.

11

Hi.

Try This:

this.getAnagrafica().then(() => {
       console.log(this.iobAnagrafica);
       this.formAnagrafica = this.formBuilder.group({
          ID_INSTALLATO: new FormControl(this.iobAnagrafica.get('id_installato')),
          ID_ANAGRAFICA: new FormControl(this.iobAnagrafica.get('id_anag')),
          ID_PRODUTTORE: new FormControl(this.iobAnagrafica.('id_produttore')),
          ID_GRUPPO: new FormControl(this.iobAnagrafica.('id_gruppo')),
          ID_INSTALLATORE: new FormControl(this.iobAnagrafica.('id_installatore'))
       });
       this.formLoaded = true;
    });